Question

我有一个菜单，其中包含子菜单，我已将其定义为：

<nav class='top'>
    <li><a href="#">Lanky</a></li>
    <li>
        <a href="#">Links</a>
        <nav class='sub'>
            <li><a href="#">dead beef</a></li>
            <li><a href="#">cafe feed</a></li>
        </nav>
    </li>
    <li><a href="#">Locks</a></li>
    <li><a href="#">Linger</a></li>
</nav>

我设计的样式是在悬停时sub nav出现在它的父母旁边。

问题是，我无法点击这些链接。当我将鼠标悬停在父级上方时，子菜单会显示在右侧，并且子菜单旁边会显示Locks链接（此操作已被删除）。但是，一旦我mouseOut - 试着点击dead beef，它们就会消失，Lock链接会跳回原来的位置。

如何让sub menu保持允许鼠标滑过它？

Answer 1

要使您的代码符合并且可访问，您需要使用＆lt; ul＆gt;标签

我建议包装你的＆lt; li＆gt;在＆lt; ul＆gt;内用于修复导航错误的标记 - 您还可以将类应用于ul标记，而无需额外的div。

<ul class='top'>
<li><a href="#">Lanky</a></li>
<li> <a href="#">Links</a>
<li>
<ul class='sub'>
  <li><a href="#">dead beef</a></li>
  <li><a href="#">cafe feed</a></li>
</ul>
</li>
<li><a href="#">Locks</a></li>
<li><a href="#">Linger</a></li>
</ul>

Answer 2

通过解决嵌套了nav个容器的列表元素来解决此问题。非常感谢thirtydot指点我jsFiddle - 一个了不起的工具！

这是CSS ...

nav { text-align: left; }
nav li { display: inline; text-align: center; }
nav a { display: inline-block; }
nav li { width: 95px; }
nav li nav { display: none; }
nav li:hover nav { display: inline; }

消失的子菜单

2 个答案: