H3和列表下拉菜单CSS3

Question

得到了一个HTML列表与CSS下拉菜单的工作，当你通过像在我的例子“产品展示”一< LI>元素徘徊。但是我想要的效果与通过< h3>像我的示例中的“联系人”一样悬停时效果相同。可能吗？

这里的HTML：

<h3>Contact</h3> 
<ul> 

    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li> 
     <a href="#">Products &#9662;</a> 
     <ul> 
      <li><a href="#">Laptops</a></li> 
      <li><a href="#">Monitors</a></li> 
      <li><a href="#">Printers</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
</ul> 

而且CSS代码：

ul li ul { 
    display: none; 
} 

ul li:hover ul{ 
    display: block; /* display the dropdown */ 
} 

非常感谢你提前。

Answer 1

悬停时，你只能控制CSS鼠标悬停在其上的元素，或悬停在其上的元素（其子项之一）中的元素的CSS。 所以，当你将鼠标悬停在h3因为他们1）是不是同一个对象，你不能让ul改变风格和2）不具有父子关系（他们是兄弟姐妹）。

要将鼠标悬停在h3上时显示菜单，可以将它们都包装在另一个对象（div）中并将其用于悬停事件。为了区分两种悬停方式，您可以将类名添加到ul。

See this JSfiddle，或者下面的代码：

<div class="container"> 
    <h3>Contact</h3> 
    <ul class="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li> 
      <a href="#">Products &#9662;</a> 
      <ul class="submenu"> 
       <li><a href="#">Laptops</a></li> 
       <li><a href="#">Monitors</a></li> 
       <li><a href="#">Printers</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

.container ul{ 
    display: none; 
} 
.container:hover ul.menu{ 
    display: block; 
} 
ul li ul.submenu { 
    display: none; 
} 

ul li:hover ul{ 
    display: block; /* display the dropdown */ 
} 

Answer 2

总之 - 你应该巢ul内h3

<h3> 
    Contact 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li> 
      <a href="#">Products &#9662;</a> 
      <ul> 
       <li><a href="#">Laptops</a></li> 
       <li><a href="#">Monitors</a></li> 
       <li><a href="#">Printers</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</h3> 

而且在你的CSS：

ul li ul { 
    display: none; 
} 

ul li:hover ul{ 
    display: block; /* display the dropdown */ 
} 
h3 > ul { 
    display: none; 
} 
h3:hover > ul { 
    display: block; 
} 

这里的演示：https://jsfiddle.net/mscehjLf/1/