0

我创建了两级垂直菜单。在鼠标悬停时，应该出现第二级，但它没有。

一级菜单是ul.side_nav，二级菜单是ul.side_sub_nav。我认为以下应该在鼠标悬停时显示第二个菜单：

.side_nav li:hover>ul.side_sub_nav>li {
    color: red;
    display:block; //it was display:none; before
}

这是我的完整代码：

<ul class="side_nav">
    <li class="li_sb "> <a href="index.php?p=subcategories_list&amp;cat=1">Vie professionnelle</a>

    </li>
    <ul class="side_sub_nav">
        <li>Vie professionnelle - subc2</li>
        <li>Vie professionnelle - subc1</li>
    </ul>
    <li class="li_sm "> <a href="index.php?p=subcategories_list&amp;cat=4">Administration et droit</a>

    </li>
    <ul class="side_sub_nav">
        <li>Administration et droit - subc1</li>
        <li>Administration et droit - subc2</li>
    </ul>
    <li class="li_sp "> <a href="index.php?p=subcategories_list&amp;cat=5">Vie pratique</a>

    </li>
    <ul class="side_sub_nav">
        <li>Vie pratique - subc1</li>
        <li>Vie pratique - subc2</li>
    </ul>
    <li class="li_sh "> <a href="index.php?p=subcategories_list&amp;cat=6">Immobilier et logement</a>

    </li>
    <ul class="side_sub_nav">
        <li>Immobilier et logement - subc1</li>
        <li>Immobilier et logement - subc2</li>
    </ul>
</ul>

CSS：

.side_nav {
    list-style-type: none;
    list-style-image: none;
    width: 250px;
    margin-bottom: 37px;
}
.side_sub_nav {
    list-style-type: none;
    list-style-image: none;
    width: 250px;
    display: none;
}
.side_nav li {
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-position: 8px center, 232px center;
    height: 42px;
    line-height: 42px;
    border: 1px solid #dddddd;
    font-size: 16px;
    padding-left: 45px;
    cursor: pointer;
}
.side_sub_nav li {
    background-color: #008ec9;
    height: 42px;
    line-height: 42px;
    border: 1px solid #dddddd;
    font-size: 12px;
    padding-left: 22px;
    cursor: pointer;
    color: white;
}
.side_nav li a, .side_sub_nav li a {
    text-decoration: none;
    color: #3f3f3f;
}
.side_nav li:hover, .side_nav li.active {
    background-color: #008ec9;
}
.side_nav li:hover a, .side_nav li.active a {
    color: white;
}
.side_nav li:hover>ul.side_sub_nav>li {
    color: red;
    display:block;
}

jsfiddleE：http: //jsfiddle.net/Sggsz/

编辑： 我需要一个接一个地显示第一级和第二级菜单。因此，当第二级出现时，它应该将第一级项目向下推。

4

3 回答 3

1

更新答案 2

我们仍然嵌套<ul class="side_sub_nav">在列表项<li>中。但是这一次我们的目标是<a>列表项中的锚标记<li>。因此，所有应用于列表项的样式现在都应用于锚标记。我还将锚标记添加到您以前没有的二级列表项中。

我认为您遇到的主要问题是您的二级菜单是您悬停在顶层的元素的兄弟（相邻）。这使得它很难瞄准。

这是一个更新的 jsFiddle： http: //jsfiddle.net/Sggsz/6/，以及下面的 HTML 和 CSS。

HTML 

<ul class="side_nav">
     <li class="li_sb ">
          <a href="index.php?p=subcategories_list&amp;cat=1">Vie professionnelle</a>
          <ul class="side_sub_nav">
               <li><a href="#">Vie professionnelle - subc2</a></li>
               <li><a href="#">Vie professionnelle - subc1</a></li>
          </ul>
     </li>
     <li class="li_sm ">
          <a href="index.php?p=subcategories_list&amp;cat=4">Administration et droit</a>
          <ul class="side_sub_nav">
               <li><a href="#">Administration et droit - subc1</a></li>
               <li><a href="#">Administration et droit - subc2</a></li>
          </ul>
     </li>
     <li class="li_sp ">
          <a href="index.php?p=subcategories_list&amp;cat=5">Vie pratique</a>
          <ul class="side_sub_nav">
               <li><a href="#">Vie pratique - subc1</a></li>
               <li><a href="#">Vie pratique - subc2</a></li>
          </ul>
     </li>
     <li class="li_sh ">
          <a href="index.php?p=subcategories_list&amp;cat=6">Immobilier et logement</a>
          <ul class="side_sub_nav">
               <li><a href="#">Immobilier et logement - subc1</a></li>
               <li><a href="#">Immobilier et logement - subc2</a></li>
          </ul>
     </li>
</ul>

CSS 

.side_nav, .side_sub_nav {
    list-style: none;
    width: 250px;
}
.side_nav {
    margin-bottom: 37px;
}
.side_sub_nav {
    display: none;
}
.side_nav li:hover .side_sub_nav {
    display:block;
}
.side_nav a,
.side_sub_nav a {
    height: 42px;
    line-height: 42px;
    border: 1px solid #dddddd;
    text-decoration: none;
}
.side_nav a {
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-position: 8px center, 232px center;
    font-size: 16px;
    width: 205px;
    padding-left: 45px;
    display: block;
    color: #3f3f3f;
}
.side_sub_nav a {     
    background-color: #008ec9;
    font-size: 12px;
    padding-left: 22px;
    color: white;
}
.side_sub_nav a:hover {
    color: red;
}

答案 1

您应该将子菜单嵌套在列表元素中，如下所示：

HTML 

<ul class="side_nav">
     <li class="li_sb ">
          <a href="index.php?p=subcategories_list&amp;cat=1">Vie professionnelle</a>
          <ul class="side_sub_nav">
               <li>Vie professionnelle - subc2</li>
               <li>Vie professionnelle - subc1</li>
          </ul>
     </li>
     <li class="li_sm ">
          <a href="index.php?p=subcategories_list&amp;cat=4">Administration et droit</a>
          <ul class="side_sub_nav">
               <li>Administration et droit - subc1</li>
               <li>Administration et droit - subc2</li>
          </ul>
     </li>
</ul>

CSS 

.side_sub_nav {
     display: none;
}
.side_nav li:hover .side_sub_nav {
     display: block;
}
于 2013-07-04T18:55:07.700 回答
0 
I changed a little bit your code: 
http://jsfiddle.net/Sggsz/4/
于 2013-07-04T19:01:18.453 回答
0

ul.side_sub_nav您正在使用的选择器正在寻找.side_nav li:hover. 但是，您的标记将您.side_sub_nav作为兄弟，因此您指定的样式将不会被应用。

我相信您正在寻找的是直接兄弟选择器。而不是使用>，而是使用+。

于 2013-07-04T18:45:33.397 回答