悬停 li 并更改同级子菜单答案

【问题标题】：hover li and change sibling submenu悬停 li 并更改同级子菜单
【发布时间】：2016-07-15 17:08:25
【问题描述】：

我需要一点帮助。我正在尝试制作一个带有子菜单的菜单，以便在没有 javascript 或 jquery 的情况下打开（如果可能，只有 css）。

<nav id="container">
  <ul>
    <li><a href="">Link1</a></li>
    <li class="haschildren selected">
    <a>Link2</a>
    <ul class="submenu">
      <li><a href="">Link2-1</a></li>
      <li><a href="">Link2-2</a></li>
      <li><a href="">Link2-3</a></li>
   </ul>
   </li>
   <li class="haschildren">
   <a>Link3</a>
   <ul class="submenu">
      <li><a href="">Link3-1</a></li>
      <li><a href="">Link3-2</a></li>
      <li><a href="">Link3-2</a></li>
   </ul>
   </li>
   </ul>
</nav>

当我选择了类并加载了页面时，.selected .submenu 将打开。但是，当我将鼠标悬停在具有子菜单的另一个 li 时，我希望选定的子菜单消失并出现新的子菜单。在我的情况下，当将鼠标悬停在 Link3 li 上时，我无法隐藏选定的子菜单。对不起我的英语不好。为了清楚起见，我想在将 Link3 悬停时隐藏 Link2 子菜单并打开 Link3 子菜单。但是当从 Link3 悬停时返回默认选择。如果有人可以提供帮助，我将不胜感激。

我在这里做了一个例子。 https://jsfiddle.net/ef8zgogr/

【问题讨论】：

您不需要 .selected 类名，因为使用 :hover 伪状态您可以在不更改类名的情况下实现整个功能。
我希望在页面加载后打开 selected.submenu。这就是我使用选定类的原因

标签： html css

【解决方案1】：

对 .submenu 应用显示无，然后在 :hover 父 li（具有 .hasChildren 类）上将其更改为显示块。

.submenu {display:none}
.selected ul{display:block}

#container:hover li ul{display:none}
#container li:hover ul{display:block}

<nav id="container">
  <ul>
    <li><a href="">Link1</a></li>
    <li class="haschildren selected">
    <a>Link2</a>
    <ul class="submenu">
      <li><a href="">Link2-1</a></li>
      <li><a href="">Link2-2</a></li>
      <li><a href="">Link2-3</a></li>
   </ul>
   </li>
   <li class="haschildren">
   <a>Link3</a>
   <ul class="submenu">
      <li><a href="">Link3-1</a></li>
      <li><a href="">Link3-2</a></li>
      <li><a href="">Link3-2</a></li>
   </ul>
   </li>
   </ul>
</nav>

【讨论】：

加载页面后，我希望打开 selected.submenu。我怎样才能做到这一点？然后每次悬停后返回原始状态
ok - 试试这个 - 它有两种艺术 - 显示选定 ul 的初始状态和不显示非选定 ul 的初始状态。然后将鼠标悬停在专利列表上会隐藏所有 ul li，除了您悬停的 ul 。然后，当您离开 #container - 它会恢复到原始状态。

【解决方案2】：

但是当我将鼠标悬停在具有子菜单的另一个 li 时，我希望选中子菜单消失

当其他子菜单被直接 css 悬停（更像单选按钮）时，没有简单的方法来关闭选定（展开）子菜单。

【讨论】：