Question

我需要一点帮助。我试图创建一个菜单，子菜单打开没有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/

Answer 1

将一个显示无应用到.submenu＆＃39;然后再打开：将鼠标悬停在父li（带有.hasChildren类）上，将其更改为显示块。

＆＃13;

.submenu {display:none}
.selected ul{display:block}

#container:hover li ul{display:none}
#container li:hover ul{display:block}

＆＃13;

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

＆＃13;

Answer 2

但是当我悬停其他具有子菜单的li时，我想要选中子菜单消失

当其他子菜单被直接css悬停（更像是单选按钮）时，没有简单的方法可以关闭所选（扩展）子菜单。

悬停李并更改兄弟子菜单

2 个答案: