html - 二级菜单 - 二级菜单不出现

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> .因此，所有应用于列表项的样式现在都应用于 anchor 标记。我还在你之前没有的二级列表项中添加了 anchor 标签。

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

这是一个更新的 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;
}