如何在此菜單上正確使用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上使用display：none。 現在，一旦服務選項卡懸停，我想顯示.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：hover”表示當一個帶有“the_one”類的li被覆蓋時會發生這種情況，然后它將一個display：block應用於列表項目中帶有“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>

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