0

わかりました、これは本当に私を苛立たせます！私は1時間そこにいて、オンラインで調べています。さて、＃top-section li：hover aを追加したので、まだサブメニューにいるときは、親リンクがホバーされたままになります。ウェルプ、私の問題は、サブメニューのリンクの色も変更されていることです。リンクが灰色であると想定される場合。

＃top-section ul ul li aでは、色は＃8b8b8bです。しかし、＃top-section li：hover aはそれらを変更しています...そしてそれは私からのがらくたを苛立たせています！私はjQueryだけに依存してナビゲーションを構築するのが嫌いなので、jQuery以外にそれを修正する方法を見つけることができません。

これが私のCSSです：

    #top-section li:hover a, #top-section li a:hover {
    background: #fff;
    color: #bb461d;
}

次に、変更されている部分は次のとおりです。

        #top-section ul ul li a {
        display: block;
        padding: 3px 4px;
        width: 156px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        color: #8b8b8b;
        font-weight: normal;
    }

2番目にリストされているときになぜ上書きされるのかわかりません。サブメニューlia'sに直接表示されます...誰かが私を助けてくれますか？

これが完全なCSSですが、必要がなければ読む必要はありません。参考までに：

    #top-section ul { list-style: none; }
#top-section li {
    display: block;
    float: left;
    position: relative;
    z-index: 500;
}
#top-section a {
    color: #b3b3b3;
    display: block;
    float: left;
    padding: 0 8px 0 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 9px 35px 9px 9px;
}
#top-section li:hover a, #top-section li a:hover {
    background: #fff;
    color: #bb461d;
}
    /*** nested list ***/
    #top-section ul ul {
        display: none;
        position: absolute;
        left: 0;
        margin: 32px 0 0 -1px;
        list-style: none;
        background: #fff;
        border: 1px solid #ababab;
        border-top: none;
        width: 312px;
    }
    #top-section ul ul li {
        width: 156px;
        margin: 0;
    }
    #top-section ul ul li a {
        display: block;
        padding: 3px 4px;
        width: 156px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        color: #8b8b8b;
        font-weight: normal;
    }
    #top-section ul ul li a:hover {
        color: #8b8b8b;
        background: #ececec;
    }
4

2 に答える 2

1

>私がこれを正しく読んでいるなら、コンビネータを使用することでうまくいくはずです：

#top-section ul li:hover > a, #top-section ul li > a:hover {
    background: #fff;
    color: #bb461d;
}

例： http： //jsfiddle.net/unbws/

[編集]

私がこの回答を代替として追加した理由は、別の回答のコメントでlavabeamsによって共有された！importantを使用しない理由に関するこのリンクに要約されています。

于 2012-11-29T01:49:55.057 に答える
-2

色の値を2番目に指定しても、それが優先されるわけではありません。!importantたとえば、次のように 使用しますcolor: #8b8b8b !important;。それがうまくいかない場合は、cssをもう一度見てください。要素に多くの重複があるので、それが原因である可能性があります。

于 2012-11-29T01:34:49.763 に答える