html - 子菜单在手机上打不开

Question

这是我的 HTML:

<nav class="mkdf-main-menu mkdf-drop-down mkdf-default-nav">
    <ul id="menu-home-menu" class="clearfix">
        <li id="nav-menu-item-3436" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home  narrow">
            <a href="https://website" class="">
                <span class="item_outer">
                    <span class="item_text">Home</span>
                </span>
            </a>
        </li>
        <li id="nav-menu-item-3437" class="menu-item menu-item-type-post_type menu-item-object-property-item  narrow">
            <a href="https://website/p" class="">
                <span class="item_outer">
                    <span class="item_text">Projekt</span>
                </span>
            </a>
        </li>
        <li id="nav-menu-item-3463" class="menu-item menu-item-type-post_type menu-item-object-property-item  narrow">
            <a href="https://website/pr" class="">
                <span class="item_outer">
                    <span class="item_text">Lage</span>
                </span>
            </a>
        </li>
        <li id="nav-menu-item-4855" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children mkdf-active-item has_sub narrow">
            <a href="https://website/gruyu" class=" current ">
                <span class="item_outer">
                    <span class="item_text">Häuser</span>
                    <i class="mkdf-menu-arrow fa fa-angle-down"></i>
                </span>
            </a>
            <div class="second">
                <div class="inner">
                    <ul>
                        <li id="nav-menu-item-3478" class="menu-item menu-item-type-post_type menu-item-object-page ">
                            <a href="https://website/grundrissnavigator/" class="">
                                <span class="item_outer">
                                    <span class="item_text">Grundrissnavigator</span>
                                </span>
                            </a>
                        </li>
                        <li id="nav-menu-item-3477" class="menu-item menu-item-type-post_type menu-item-object-page ">
                            <a href="https://website/preisliste/" class="">
                                <span class="item_outer">
                                    <span class="item_text">Preisliste</span>
                                </span>
                            </a>
                        </li>
                        <li id="nav-menu-item-3476" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3473 current_page_item ">
                            <a href="https://website/aufd" class="">
                                <span class="item_outer">
                                    <span class="item_text">Ausstattung</span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li id="nav-menu-item-4686" class="menu-item menu-item-type-post_type menu-item-object-page  narrow">
            <a href="https://website/g" class="">
                <span class="item_outer">
                    <span class="item_text">Galerie</span>
                </span>
            </a>
        </li>
        <li id="nav-menu-item-4807" class="menu-item menu-item-type-custom menu-item-object-custom  narrow">
            <a target="_blank" href="https://website/" class="">
                <span class="item_outer">
                    <span class="item_text">Exposé</span>
                </span>
            </a>
        </li>
        <li id="nav-menu-item-3466" class="menu-item menu-item-type-post_type menu-item-object-page  narrow">
            <a href="https://website/k" class="">
                <span class="item_outer">
                    <span class="item_text">Kontakt</span>
                </span>
            </a>
        </li>
    </ul>
</nav>

并且这个在 html 中位于第二类的子菜单不会在移动设备中打开。

这是我的 CSS

.second {
    position: absolute;
    display: block;
    left: -10px;
    top: 100%;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    z-index: 10;
    -webkit-transition: top .15s ease-out;
    -moz-transition: top .15s ease-out;
    transition: top .15s ease-out;

我尝试设置所有其他显示选项，但仍然不起作用，有什么帮助吗？

Answer 1

需要更改以下属性，以便您的场景在移动设备上可以看到菜单:

.second {
    opacity: 1;
    top: 0;
    visibility: visible; 
}

例如，您可以使用以下代码在父菜单项悬停时显示子菜单。应该调整 left 和 top 属性以适合您的布局:

.menu-item-has-children:hover .second {
     left: 85px;
     opacity: 1;
     top: 70px;
     visibility: visible; 
}