CSS当鼠标悬停在父菜单上时如何隐藏当前子菜单项；s没有javascript的同级项

我试图创建一个两级水平导航菜单（或菜单栏），当您将鼠标悬停在父菜单项上时，它会显示子菜单项。如果选择了其中一个子项，则父项将显示一个可视指示器，指示当前页面与其子项之一相对应，并且其子项将保持显示状态

Child2是当前页面：

parent1  *parent2*   parent3
             |
  child1  *child2*  child3

当我将鼠标悬停在parent1或parent3上时，将根据需要显示其子项。我的挑战是，当显示其他家长的孩子时，我不知道如何隐藏parent2的孩子。有没有一种CSS方法可以实现这一点？我知道当鼠标移出parent2和parent2的子对象时，我可以使用jquery隐藏parent2的子对象，但我不想为了最大的可用性而使用javascript

这里是现场直播

CSS:

HTML:

非常感谢任何提示或帮助

---

Terry

如果您想要的是，当用户单击child2选择时，响应将生成一个显示child2的页面，但当用户将鼠标悬停在parent1或parent3上时，child2应该消失，那么您需要使用JavaScript。原因是它是一个以不同方式影响DOM中多个节点的事件。CSS仅以相同的方式影响DOM中的1+个节点，并且通常仅在页面加载时影响。例外情况是伪类，如：hover，它会影响页面加载后的显示

---

如果您需要一个CSS多菜单解决方案，或者只是想看看一个好的解决方案，它可能会帮助您找到您的答案，请查看。我从中学到了很多，并将其破解成一个我使用过无数次的解决方案。

css中没有

伪
类来触发
鼠标退出
等效事件。你必须使用javascript来完成你想要做的事情。有很多可用的菜单/插件与您所做的完全相同（我的意思是，无需重新发明轮子）。
简单的解决方案是尽可能地降低性能。在这种情况下，我会在子菜单上设置背景色，并在悬停状态下设置自升式z索引，这样bg将覆盖其他子菜单--[edit]它们仍然可见，但文本不会重叠。然后使用javascript使其成为您真正想要的

更复杂的解决方案意味着您必须使所有子菜单占用相同的空间——一种方法是使用负边距，然后使用填充来覆盖该空间——并让显示的任何子菜单覆盖打开的子菜单，再次使用更大的z索引（应用于悬停时的父菜单）

编辑我一直用来处理这种情况的另一件事是做如下事情

ul:hover ul { display:none; } //or in your case, set to invisible
ul li:hover ul { display:block; } //in your case, set to visible

这意味着当UL悬停在上面时，子菜单将消失，并且，因为li:hover在级联中较低，并且更具体（我通常需要处理大量的状态类名称——我不认为您会），应该允许子菜单重新出现。它并不像您希望的那样细粒度，但几乎是这样。
我敢肯定，您无法仅通过CSS实现这种细粒度控制。您需要使用JS更改DOM元素的状态。
不使用javascript也可以。检查本页中的答案


为兄弟姐妹子项提供更高的z索引，为活动菜单子项提供更少的z索引。
我将使用选项二和选项三，它们非常有效。DN，这些建议让我非常接近，非常感谢！
<div class="main-nav2" id="ctl00_MainMenu"> 
  <div class="AspNet-Menu-Horizontal"> 
      <ul class="AspNet-Menu"> 
        <li class="AspNet-Menu-Item"> 
          <a href="javascript:return false;#1"> 
            <span> A Menu Option</span></a> 
          <ul> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/A1.aspx"> 
                A1 SubMenu Option</a> 
            </li> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/A2.aspx"> 
                A2 SubMenu Option</a> 
            </li> 
          </ul> 
        </li> 
        <li class="AspNet-Menu-Item"> 
          <a href="javascript:return false;"> 
            <span> B Menu Option</span></a> 
          <ul> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/B1.aspx"> 
                B1 SubMenu Option</a> 
            </li> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/B2.aspx"> 
                B2 SubMenu Option</a> 
            </li> 
          </ul> 
        </li> 
        <li class=" AspNet-Menu-Selected"> 
          <a href="/CSSMenu/C.aspx"> 
            <span> C Menu Option</span></a> 
        </li> 
      </ul> 
  </div> 
</div> 

ul:hover ul { display:none; } //or in your case, set to invisible
ul li:hover ul { display:block; } //in your case, set to visible