Question

我创建了两级垂直菜单。鼠标悬停时，应出现第二级，但不会出现。

第一级菜单是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;
}

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

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

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

Answer 2

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

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

Answer 3

I changed a little bit your code: 
http://jsfiddle.net/Sggsz/4/

两级菜单 - 第二级不显示

3 个答案: