如何正確使用此菜單上的display：block？

Question

代碼：

<div class="menu"> 
<ul class="top_thing"> 
     <li class="one_one">Services</li> 
      <ul class="the_one"> 
       <li class="second">Language 1</li> 
     <li class="second">Language 2</li> 
     <li class="second">Language 3</li> 
     <li class="second">Language 4</li> 
      <li class="second">Language 5</li> 
    </ul> 
    <li class="one_one">About Us</li> 
     <li class="one_one">Contact</li> 
</ul> 
</div> 

對於CSS：我使用顯示：無上.the_one。現在，一旦服務標籤懸停，我想然後顯示.the_one。我怎樣才能做到這一點？我試過了：

li.the_one:hover { 
display:block; 
} 

但是這也行不通。

Answer 1

您的HTML無效。 <ul>必須只有<li>兒童（這包括其他<ul>一旦你解決這個問題，添加下列規則：。

.the_one { 
    display: none; 
} 

.one_one:hover .the_one { 
    display: block; 
} 

http://jsfiddle.net/xvEvj/

Answer 2

你需要定位你的css中的內部列表才能顯示它。

如下更改CSS：

li.the_one:hover ul.the_one 
{ 
display:block 
} 

的「li.the_one：懸停」指出，當與類「the_one」李懸停在此會發生，那麼它適用的顯示：塊到帶有「the_one」類的列表項中的類「the_one」的ul。

希望這會有所幫助。

乾杯。

Answer 3

你的HTML是無效

<div class="menu"> 
<ul class="top_thing"> 
    <li class="one_one">Services 
     <ul class="the_one"> 
      <li class="second">Language 1</li> 
      <li class="second">Language 2</li> 
      <li class="second">Language 3</li> 
      <li class="second">Language 4</li> 
      <li class="second">Language 5</li> 
     </ul> 
    </li> 
    <li class="one_one">About Us</li> 
    <li class="one_one">Contact</li> 
</ul> 

第二個無序列表應該在第一個無序列表的列表項中。