1

だから私はcssメニューを試してみましたが、修正できない単純なバグがあり、それを検索する助けが見つかりませんでした。問題は、ドロップダウンメニューにカーソルを合わせると、親リンクが強調表示されたままになり、テキストが元の色に戻ることです。うまくいけば、それはそれを説明します。これがcssコードです。何かを追加するか、コード行を修正するだけの問題だと確信しています。ここで問題を確認できます。サブメニュー（BARや情報など）にアクセスするまで、すべて正常に機能します。

#nav, #nav ul {
    text-align: center;
    text-size:16px;
    float: left;
    width: 750px;
    height: 20px;
    list-style: none;
    line-height: 1;
    background: white;
    padding: 0;
    border: solid #000;
    border-width: 0px;
    border-bottom-width: 1px;
    margin: 0;
    background-image: url('/images/bg.gif');
}

#nav a {
    display: block;
    width: 75px;
    height: 20px;
    color: #0000FF;
    text-decoration: none;
}

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
}

#nav li {
    float: left;
    padding: 0;
    width: 75px;
}

#nav li ul { /*sub menu */
    position: absolute;
    left: -999em;
    height: auto;
    width: 75px;
    border: solid #000;
    border-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    background-image: url('/images/submenu_bg.png');
}

#nav li li {
    width: 75px;
}

#nav li ul a {
    width: 75px;
}

#nav li ul ul {
    margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}

#nav li:hover, #nav li.sfhover {
    height: 20px;
    background: #0000FF;
}
4

2 に答える 2

1

li次のように、のホバーでリンクの色を設定してみてください。

#nav li:hover a {
    color: #fff;
}

#nav li:hover li a
{
    color: #0000FF;
}
于 2009-01-12T18:00:02.217 に答える
1

テキストの色を に設定しています#nav a:hoverが、背景の色を に設定しています#nav li:hover。サブメニューは 内に含まれているためli、カーソルがサブメニュー内にある場合でも、ホバーされていると見なされます。サブメニューはリンク内に含まれていないため、強調表示されず、通常の色に戻ります。メニュー項目の強調表示を停止する場合は、代わりにbackgroundプロパティを移動します#nav a:hover。

前：

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
}

#nav li:hover, #nav li.sfhover {
    height: 20px;
    background: #0000FF;
}

後：

#nav a:hover, #nav li.sfhover a {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
    background: #0000FF;
}

または、サブメニューにカーソルを合わせている間、メニューを強調表示したままにしたい場合 (IMO の方が見栄えが良い)、 に移動しcolorますli:hover。少し冗長であることはわかっていますが、機能します。:-)

前：

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
}

#nav li:hover, #nav li.sfhover {
    height: 20px;
    background: #0000FF;
}

後：

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
}

#nav li:hover a, #nav li.sfhover a {
    color:white;
}

#nav li:hover li a, #nav li.sfhover li a {
    color:blue;
}

#nav li:hover li a:hover, #nav li.sfhover li a:hover {
    color:white;
}

#nav li:hover, #nav li.sfhover {
    color: #FFF;
    height: 20px;
    background: #0000FF;
}
于 2009-01-12T18:41:43.083 に答える