两级菜单 - 第二级不出现

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

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

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

Answer 2

修订答2

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

我认为你遇到的主要问题是你的二级菜单是你在顶层徘徊的元素的兄弟（相邻）。这使得难以瞄准。

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

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