css - 消失的子菜单

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 链接会跳回其原始位置。

如何使子菜单持续存在以允许鼠标滑过它？

Answer 1

为了使您的代码兼容和可访问，您需要使用

标签。

我建议将您的

• 包装在
  标签中以修复您的导航错误 - 您也可以在其中将您的类应用到 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>