水平導航欄無法在IE和Firefox中工作

我正在用HTML和CSS創建導航菜單。但它在Firefox 19中無法正常工作。我試圖修復它幾個小時。但沒有運氣。水平導航欄無法在IE和Firefox中工作

我的問題是當懸停在子菜單上顯示菜單項周圍的邊框。它在谷歌瀏覽器和Safari瀏覽器上正常工作。但不是在Firefox和IE 7和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

來源

2013-03-19 TNK

一個鏈接，您應該更多地利用孩子選擇>的。我將其應用於此聲明：

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

這是Fiddle。

來源

2013-03-19 09:02:34

謝謝..但是IE 7和8沒有正確地使用.. – TNK 2013-03-19 09:05:35

不好意思，但是我不能在IE8下運行，即使它完全是空的。所以我無法測試。 – 2013-03-19 09:11:31

Linus Caldwell發現了另一個問題。這是當子菜單的菜單項再次激活時，顯示項目周圍的邊框。現在懸停是好的。這是我用於子菜單的活動鏈接的樣式 - '#nav li：hover ul li.current-sub { \t \t background：#ffdfbd; \t \t} \t \t 李#nav：懸停UL li.current子一個{ \t \t顏色：＃5f3100; \t \t} \t \t \t #nav李：懸停UL li.current子：懸停{ \t \t背景：＃ffcd98; \t}' – TNK 2013-03-19 09:16:57

水平導航欄無法在IE和Firefox中工作

回答

相關問題