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

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。