0

HTMLとCSSを使用してナビゲーションメニューを作成しています。しかし、Firefox19では正しく機能していません。何時間も修正しようとしました。しかし、運はありません。

私の問題は、サブメニューにカーソルを合わせると、メニュー項目の周囲に境界線が表示されることです。それはグーグルクロームとサファリで正しく動作しています。しかし、FirefoxとIE7および8ではそうではありません。

これは私のCSSです：

#nav a:hover {
    background: #000;
    color: #c5c5c5; 
}

#nav .current a, #nav li:hover > a {
    background: -moz-linear-gradient(#D0441B, #BB3415);
    background: -webkit-linear-gradient(#D0441B, #BB3415); /* Safari 5.1+, Chrome 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D0441B', endColorstr='#BB3415'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#D0441B', endColorstr='#BB3415')"; /* IE8+ */  
    border-color: #B5501A;
    box-shadow: 0 1px 0 0 #C97B4B inset;
    color: #FFFFFF; 
}


#nav li:hover ul li.current-sub  {
    background: #ffdfbd;
}   

#nav li:hover ul li.current-sub  a {
    color: #5f3100;
}       

#nav li:hover ul li.current-sub:hover {
    background: #ffcd98;
    border: none !important;
}   


/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none !important;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    text-shadow: none;
}

#nav ul li:hover {
    background: #ffefdd;

}

#nav ul li a:hover {        
    -webkit-border-radius: 0;
    -moz-border-radius: 0;  
    border-radius: 0;   
    border: none;
}

/* dropdown */
#nav li:hover > ul {
    display: block;     
    z-index: 999;
}

これはjsfiddleへのリンクです

4

1 に答える 1

0

子セレクターをもっと活用する必要があります>。私はそれをこのステートメントに適用しました：

#nav .current > a, #nav > li:hover > a {
    background: -moz-linear-gradient(#D0441B, #BB3415);
    /* ... */
}

ここにFiddleがあります。

于 2013-03-19T09:02:34.303 に答える