Automatickly open submenu

Support Themes & Styling
1

Hello, I have a little probem. On my web pages https://www.vdc-test.eu I have menu and here Servis and Kontakt is submenu. But I must on this items clicking on mouse. I want when I hover on this Items then submenu automaticly open. Can you give me answer?

{% macro make_menu_simple_items_from_slugs_array(slugs, page) %}
    {% for slug in slugs %}
        {% set p = page.find(slug) %}
        <li>
            <a href="{{ p.url }}" class="{% if p.active or p.activeChild %}active{% endif %}">
                {{ p.menu }}
                {% if p.active %}
                    <span class="sr-only">(aktivní)</span>
                {% endif %}
            </a>
        </li>
    {% endfor %}
{% endmacro %}


{% macro make_main_menu_items(page) %}
    {% set slugs = ['/produkty', '/pronajem', '/servis', '/poptavka', '/kontakt'] %}
    {% for slug in slugs %}

        {% set p = page.find(slug) %}
        {% set childrens = p.children.visible %}

        {% if not count(childrens) %}
            <li class="{% if p.active or p.activeChild %}active{% endif %}">
                <a href="{{ p.url }}">
                    {{ p.menu }}
                    {% if p.active %}
                        <span class="sr-only">(aktivní)</span>
                    {% endif %}
                </a>
            </li>

        {% else %}
            <li class="{% if p.active or p.activeChild %}active{% endif %} dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    {{ p.menu }}
                </a>
                <ul class="dropdown-menu dropdown-menu-{{ p.slug }} clearfix">
                    {{ _self.make_main_menu_dropdown_items(childrens, page) }}
                </ul>
            </li>

        {% endif %}

    {% endfor %}
{% endmacro %}


{% macro make_main_menu_dropdown_items(pages, page) %}
    {% for p in pages %}
        <div class="cont-20-menu" data-same-height-groupo="samecol-menu" data-same-height-min-viewport-width="768">
            <li class="dropdown-menu-top {% if p.active or p.activeChild %}active{% endif %}">
                <a href="{{ p.url }}">
                    {{ p.menu }}
                    {% if p.active %}
                        <span class="sr-only">(aktivní)</span>
                    {% endif %}
                </a>
            </li>

            {% for pp in p.children.visible %}
                <li class="{% if p.active or p.activeChild %}active{% endif %}">
                    <a href="{{ pp.url }}">
                        {{ pp.menu }}
                        {% if pp.active %}
                            <span class="sr-only">(aktivní)</span>
                        {% endif %}
                    </a>
                </li>
            {% endfor %}
        </div>
    {% endfor %}
{% endmacro %}
2

This should solve your case

You need to have a display: block; on :hover. Something like:

.dropdown:hover > .dropdown-menu {
  display: block;
}
3

Thank you very much. It is work.