0

ULを使用してドロップダウンメニューを作成しています。ただし、ターゲットパスコードが繰り返され、css が混乱するため、4 層の深い UL をターゲットにすることはできません。

このシーケンスの最後の ul をターゲットにul lu ul lu ul li ulして、不透明度:0 に伝えたいと思います。

ul は #menu div でラップされています。したがって、私は次のように書いています:ここの css ではと#menu li li li ul {opacity:0} の違いがわからないので、親にも変更が適用されます。li li ulli li li ul

私が見逃している解決策はありますか？

前もって感謝します。

4

1 に答える 1

0

これは、CSSのみを使用して、マルチレベルのドロップダウンメニューで行ったことです..これがお役に立てば幸いです。同じ方法でさらにレベルを追加できます

#menu {
    width:1000px;
    margin:0 auto;
    height:44px;
    z-index:300;
}

#menu ul {
    list-style:none;
    position:relative;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:13px 35px 13px 35px;
    text-decoration:none;
    color:#FFF;
}

#menu ul li a:hover {
    background:#4255a4 url(../images/nav_hover.jpg) bottom left repeat-x;
}

#menu ul li ul {
    position:absolute;
    top:43px;
    visibility:hidden;
    z-index:300;
    width:184px;
    height:auto;
    -moz-box-shadow: 1px 1px 10px #333;
    -webkit-box-shadow: 1px 1px 10px #333;
    box-shadow: 1px 1px 10px #333;
}

#menu ul li ul li {
    position:relative;
    float:none;
}

#menu ul li ul li a {
    padding:8px 10px 8px 10px;
}

#menu ul li:hover ul {
    visibility:visible;
}

#menu ul li ul:hover {
    visibility:visible;
}


#menu ul li:hover ul li ul{
    visibility:hidden;
}

#menu ul li ul:hover li ul{
    visibility:hidden;
}

#menu ul li ul li ul {
    position:absolute;
    top:0px;
    margin:0px 0px 0px 185px;
    visibility:hidden;
    z-index:300;
    width:184px;
    height:auto;
    -moz-box-shadow: 1px 1px 10px #333;
    -webkit-box-shadow: 1px 1px 10px #333;
    box-shadow: 1px 1px 10px #333;
}

#menu ul li ul li ul li {
    float:none;
}

#menu ul li ul li ul li a {
    padding:8px 10px 8px 10px;
}

#menu ul li ul li:hover > ul {
    display:block;
    visibility:visible;
    z-index:300;
}

#menu ul li ul li:hover ul {
    display:block;
    visibility:visible;
    z-index:300;
}

#menu ul li ul li ul:hover {
    display:block;
    visibility:visible;
    z-index:300;
}
于 2012-06-05T17:52:18.817 に答える