Question

我正在玩这个教程来创建一个移动下拉菜单。

https://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

一切正常，但是一旦我在前一个标签中添加了一个带有额外列表的新内容。下拉菜单往往无法正常工作。我尝试改变css但没有运气。

显示所有列表而无需用户点击它。如果我将新的多列表添加到上一个标记。

<nav id="nav" role="navigation">
<a href="#nav">Show navigation</a>
<a href="#">Hide navigation</a>
<ul class="clearfix">
    <li class="active"><a href="?home">Home</a></li>
    <li>
        <a href="?blog" aria-haspopup="true"><span>Blog</span></a>
        <ul>
            <li><a href="?javascript">JavaScript</a></li>
            <li>
                <a href="?blog" aria-haspopup="true"><span>Test</span></a>
                <ul>
                <li><a href="?design">One</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="?work" aria-haspopup="true"><span>Work</span></a>
        <ul>
            <li><a href="?webdesign">Web Design</a></li>
        </ul>
    </li>
    <li><a href="?about">About</a></li>
</ul>

我不会在这里发布整个代码，因为css元素太多了。请看下面的代码。

运行示例。

https://jsfiddle.net/cys670Lh/1/

Answer 1

您应该在悬停>时使用以阻止当前子级而不是所有后代，然后为下一个子菜单添加新的hover规则...

 #nav > ul > li:hover > ul
    {
        display: block;
        left: 0;
        right: 0;
    }
#nav > ul > li > ul > li:hover ul
    {
        display: block;
        left: 0;
        right: 0;
    }

<强> FIDDLE

无论如何，作为一个不起眼的建议，我不会使用悬停来显示菜单子类别...特别是如果你瞄准移动设备。我会使用javascript上的点击事件来使用事件。

为移动下拉菜单创建多列表的问题

1 个答案: