0

マルチレベルのメニューが次のようになっています

ここに画像の説明を入力

私のメニューが欲しい

  • 同じ背景を持っています (ご覧のとおり #5b740d )
  • 同じアクティブな背景があります (ご覧のように赤)
  • 同じホバー背景があります (ご覧のように赤)

上記の 3 つのオプションは、すべてのメニューとサブメニューに適用されますが
、私のコードは複雑に見えます。ホバーのサンプルコードは次のとおりです

/* hover: can using a simple selector to make all are same background */
.menu li:hover {
    background: red;
}
.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

インターネットでcssを取得しましたが、複雑で、自分のやり方で変更しました(しかし、それでも複雑です:(シンプルにするのを手伝ってください)。
しかし、バグが発生します:私の写真のようにアイテム(2)にカーソルを合わせると、次のアイテム(3)ホバーした？

ここに画像の説明を入力

上記の3つのオプションを実行するようにcssコードを単純化してください（複雑なコードがわかりません:(）、バグの修正を手伝ってくれてありがとう。

これが私のコードhttp://jsfiddle.net/SWF6w/です

4

2 に答える 2

0

このコードを置き換えます:

.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

これで：

.menu li li ul li>a:hover {
    background: red;
}
.menu li ul li:hover>a {
    background: red;
}

更新された jsFiddle は次のとおりです: http://jsfiddle.net/SWF6w/2/

于 2013-08-23T15:51:21.713 に答える