Css 消失子菜单

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

<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>

我将其样式设置为，悬停时，

子导航

显示在其父导航旁边

问题是，我不能点击这些链接。当我将鼠标悬停在父菜单上时，子菜单显示在右侧，子菜单旁边显示

Locks

链接（这是expexted）。但是，一旦我试着点击死牛肉，它们就会消失，

Lock

链接跳回原来的位置

---

如何使

子菜单保持不变以允许鼠标滑向它？
要使代码兼容并可访问，您需要使用
标记

我建议将您的
包装在
标签中，以修复导航错误-您也可以将您的类应用于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>













要使您的代码兼容并可访问，您需要使用
标签

我建议将您的
包装在
标签中，以修复导航错误-您也可以将您的类应用于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>













通过寻址嵌套了
nav
容器的列表元素解决了这一问题。非常感谢你给我指点——一个神奇的工具

这是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; }

通过寻址嵌套有
nav
容器的列表元素修复了此问题。非常感谢你给我指点——一个神奇的工具

这是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; }

到目前为止你有什么样的CSS？你能把你的代码整理一下吗？谢谢你告诉我关于JSFIDLE的事。我通过设置具有子体的
对象的样式，而不是依赖于运行时在
链接上生成的类，解决了这个问题。没问题。是的，听起来这正是正确的解决方法。注意@jeroen的评论。到目前为止你有什么CSS？你能把你的代码整理一下吗？谢谢你告诉我关于JSFIDLE的事。我通过设置具有子体的
对象的样式，而不是依赖于运行时在
链接上生成的类，解决了这个问题。没问题。是的，听起来这正是正确的解决方法。注意@jeroen的评论。+1
li
允许的父元素是
ul
、
ol
和
菜单（不会重新编译该元素…），根据HTML5，有些容器的行为方式与
ul
相同，并用于结构：
头
，
nav
，
部分
和
页脚
。所有这些文件都附加了
display:block
，以便保存内容。阅读这些代码更直观。我想我需要引用最后一句话：@Yasky：这里要说的是，
li
不是
nav
的有效子代。参见：+1
li
的允许父元素是
ul
，
ol
和
菜单
（不会重新编译该元素…），参见HTML5，有一些容器的行为方式与
ul
相同，并用于结构：
标题
，
导航
，
部分
和
页脚
。所有这些文件都附加了
display:block
，以便保存内容。阅读这些代码更直观。我想我需要引用最后一句话：@Yasky：这里要说的是，
li
不是
nav
的有效子代。见：