1

代码：

 <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;
 }

但这也行不通。

4

3 回答 3

3

您的 HTML 无效。 <ul>必须仅<li>作为子级（并且包括其他<ul>. 修复该问题后，添加以下规则：

.the_one {
    display: none;
}

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

http://jsfiddle.net/xvEvj/

于 2013-03-01T01:46:05.110 回答
1

您需要定位 CSS 中的内部列表以使其显示。

改变你的CSS如下：

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

“li.the_one:hover”表示当带有“the_one”类的 li 悬停在上面时会发生这种情况，然后它将显示：块应用于具有类“the_one”的 ul，其中包含类“唯一的那个”。

希望这可以帮助。

干杯。

于 2013-03-01T01:43:42.037 回答
0

您的 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>

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

于 2013-03-01T01:58:11.663 回答