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班级“the_one”。

希望这有帮助。

干杯。

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>

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

如何在此菜单上正确使用display：block？

3 个答案: