1

純粋な CSS でドロップダウン メニューを作成しようとしています。レベル 4 までは問題なく動作していますが、レベル 5 を追加しようとすると、期待どおりに動作しません。ここに私のコードリンクがあります: http://jsfiddle.net/pX6C6/5/

CSS 部分:

    #menu table {
    border-collapse:collapse;
    position:absolute;
    top:0;
    left:0;
    z-index:80;
    font-size:1em;
}
#menu li a {
    display:block;
    height:30px;
    font-family:arial, sans-serif;
    font-size:13px;
    letter-spacing:-1px;
    line-height:29px;
    width:125px;
    text-decoration:none;
    text-align:center;
}
#menu :hover {
    color:#ffffff;
    background:#5F90D0;
}
#menu :hover > a {
    color:#ffffff;
    background:#5F90D0;
}
#menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul, #menu :hover ul :hover ul:hover ul ul, #menu :hover ul :hover ul:hover ul:hover ul ul, #menu :hover ul :hover ul:hover ul:hover ul:hover ul, #menu :hover ul :hover ul:hover ul:hover ul:hover ul.left {
    position:absolute;
    left:-9999px;
    width:128px;
}

#menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul, #menu :hover ul :hover ul :hover ul:hover ul, #menu :hover ul :hover ul :hover ul:hover ul:hover ul, #menu :hover ul :hover ul :hover ul:hover ul :hover ul:hover ul {
    padding:0 3px;
    left:125px;
    top:-3px;
}
#menu :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul:hover ul.left, #menu :hover ul :hover ul :hover ul:hover ul.left {
    padding:0 3px;
    left:-131px;
    top:-3px;
}
#menu {
    list-style-type:none;
    padding:0;
    margin:0;
}
#menu ul {
    list-style-type:none;
    padding:0;
    margin:0;
}
#menu li {
    float:left;
    background:#949494;
    margin:3px 3px 0 0;
    position:relative;
}

これを修正する方法について何か提案はありますか? 前もって感謝します。

4

1 に答える 1

0

メニューがどのように動作することを正確に期待していますか?

TBH 複雑すぎるので、コードを修正したくありません。

シンプルなマルチレベル メニューは次のように実行できます: jsfiddle.net/jPG3P/1/

ul, li {
    margin: 0;
    padding: 0;
}

#menu li {
    list-style-type: none;
}

#menu li a {
    display: block;
    background: #aaf;
    height: 25px;
    width: 120px;
    line-height: 25px;
    text-decoration: none;
    color: #000;
    border: 1px solid #fff;
    border-bottom: 0;
}

#menu li a:hover {
    background: #ff7e00;
    color: #fff;
}

#menu li ul {
    display: none;
    margin: -26px 0 0 120px;
    position: absolute;
}

#menu li:hover>ul {
    display: block;
}

あなたに似た他のオプションは、これを追加することで実現できます: http://jsfiddle.net/jPG3P/2/

#menu>li {
    float: left;
}

#menu>li>ul {
    margin: 0;
}

これを追加すると、選択したすべての項目が強調表示されます: http://jsfiddle.net/jPG3P/4/

li:hover>a {
    background: #ff9f33;
}
于 2013-03-30T23:33:43.003 に答える