如何正确使用此菜单上的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> 

第二个无序列表应该在第一个无序列表的列表项中。