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/