0

2 レベルの垂直メニューを作成しました。マウスオーバーすると、第 2 レベルが表示されるはずですが、表示されません。

第 1 レベルのメニューは ul.side_nav、第 2 レベルのメニューは ul.side_sub_nav です。以下は、マウスオーバーで2番目のメニューを表示する必要があると考えました。

.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/

編集: 第 1 レベルと第 2 レベルのメニューが次々に表示される必要があります。したがって、第 2 レベルが表示されると、第 1 レベルのアイテムが押し下げられます。

4

3 に答える 3

1

更新された回答 2

<ul class="side_sub_nav">list item 内にまだ入れ子になっています<li>。しかし今回<a>は、リスト項目のアンカー タグをターゲットにしています<li>。そのため、リスト アイテムに適用されていたすべてのスタイルがアンカー タグに適用されるようになりました。また、以前にはなかった第 2 レベルのリスト項目にアンカー タグを追加しました。

あなたが抱えていた主な問題は、2 番目のレベルのメニューが、トップ レベルでホバリングしていた要素の兄弟 (隣接) だったことだと思います。これにより、ターゲットを絞るのが難しくなりました。

更新された 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 に答える