0

2 レベルのナビゲーションを 3 レベルに変えて、いくつかの問題に直面しています。

第 3 レベルでは予測どおりに表示されますが、表示したいアイテムの親ではなく、「祖父母」にカーソルを合わせると表示されます。

私はしばらくCSSをいじっていましたが、私が望むように応答させることができません。

どんな助けでも大歓迎です。

私の説明がやや不足している可能性があるため、フィドルがあります。

http://jsfiddle.net/6TGaf/

フィドルからのコード:

    #nav{
    background: #bada55;
    width: 99%;
    margin-top:-5px;
}

#nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    height: 40px;
}

#nav ul li{
    /*child elements positioned absolutley will be relative to this*/
    position: relative;
    border-top: 1px solid #e9e9e9;
    float: left;

}

#nav a{
    color: ghostwhite;
    padding: 12px 0px;
    /*fill hori space*/
    display: block;
    text-decoration: none;
/*apply transition to background property, taking 1s to change it
*/
    transition:padding 1s, background 1s;
    -moz-transition:padding 1s, background 1s;
    -webkit-transition:padding 1s, background 1s;
    -o-transition:padding 1s, background 1s;

    font-family:tahoma;

    font-size:13px;
    text-transform:uppercase;
    padding-left:20px;
}

/*hover pseduo class*/
#nav a:hover{
    /*
    RGBA background for transparancy:
    last number(0.05) is the transparency
    */
    padding-left:35px;
    background: RGBA(255,255,255,0.05);
    color:#fff;
}

#nav ul li:hover ul{
    /*diplay when hovered*/
    display: block;
}

#nav ul ul{
    position: absolute;
    left: 0px;
    top: 40px;
    border-top: 1px solid #e9e9e9;
    display: none;
    /*width: 304px;*/
    z-index: 1;
}

#nav ul ul li{
    width: 150px;
    background: #f1f1f1;
    border: 1px solid #e9e9e9;
    border-top: 0;
    /*float:left;*/

}

#nav ul ul li a{
    color:#000000;
    font-size:12px;
    text-transform:none;
}

#nav ul ul li a:hover {
    color:#929292;
}

/*3rd level...*/
#nav ul ul ul{
    position: absolute;
    left: 150px;
    top: 0px;
    border-top: 1px solid #e9e9e9;
    display: none;
    /*width: 304px;*/
    z-index: 1;
}

#nav ul ul ul li{
    width: 150px;
    background: #f1f1f1;
    border: 1px solid #e9e9e9;
    border-top: 0;
}

#nav ul ul ul li a{
    color:#000000;
    font-size:12px;
    text-transform:none;
}

#nav ul ul ul li a:hover {
color:#929292;
}

#nav ul ul li:hover ul{
/*diplay when hovered*/
display: block;
}

<nav id = "nav">
    <ul>
        <li>
            <a href="#">1.1</a>
            <ul>
                <li>
                    <a href="#">1.1.1</a>
                    <ul>
                        <li><a href="#">1.1.1.a</a></li>
                        <li><a href="#">1.1.1.b</a></li>
                    </ul>
                </li>

                <li><a href="#">1.1.2</a></li>
                <li><a href="#">1.1.3</a></li>

            </ul>
        </li>
</ul>

4

1 に答える 1

1

あなたのCSSで、

#nav ul li:hover ul{
   display: block;}

上記のコードは、最初の li 要素にカーソルを合わせると、ul ブロッ​​ク内のすべての要素を表示していました。この場合、ホバリング 1.1. 孫(1.1.1a)も上のブロックulに属しているので、それも表示されていました。

これを修正するには、次のコードを追加します。

#nav li:hover ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul{
    display:block;
    }

したがって、上記のコードが意味することは、li 要素にカーソルを合わせると、2 レベル下の要素をブロックする必要があり、li 要素にカーソルを合わせると、すぐ下の ul 要素のみを表示する必要があるということです。

実際のサンプルについては、http://jsfiddle.net/sxzR8/1/を確認してください。

于 2013-07-30T10:48:50.337 に答える