懸停在FF中不工作

Question

ul { 
    list-style-type: none; 
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
} 

ul li { 
    border-bottom: 1px solid #B9D3EE; 
} 

ul li a:link, 
ul li a:visited, 
ul li a:active { 
    width: 100%; 
    color: blue; 
} 

ul li a: hover { 
    width: 100%; 
    color: #ffffff; 
    background-color: #B9D3EE; 
} 

在IE中，上述代碼將突出顯示完整的單元格。 但在FF中，它只會突出顯示其中的鏈接。 我想FF來突出顯示IE的完整單元格。

以下是列表： 請記住，只有第一個鏈接已創建，因爲我剛開始創建此列表，並在我注意到此問題時停止測試它。

<ul> 
    <li><a href="">beauty</a></li> 
    <li>creative</li> 
    <li>Info Tech. (IT)</li> 
    <li>cycle</li> 
    <li>event</li> 
    <li>financial</li> 
    <li>legal</li> 
    <li>lessons</li> 
    <li>medical</li> 
    <li>marine</li> 
    <li>pet</li> 
    <li>automotive</li> 
    <li>farm+garden</li> 
    <li>household</li> 
    <li>labor/move</li> 
    <li>MKT/COMM</li> 
    <li>office</li> 
    <li>skill'd trade</li> 
    <li>real estate</li> 
    <li>health/wellness</li> 
    <li>travel/vac</li> 
    <li>write/ed/tr8</li> 
</ul> 

任何幫助非常感謝！

Answer 1

嗨現在刪除with 100%在anchor link CSS和你在anchor

定義 display block CSS

像這樣

ul li a: link, 
ul li a: visited, 
ul li a: active { 

display:block; // add this line 
width:100%; // remove this line 

    color: blue 
} 

ul li a:hover{ 
width:100%; //remove this line 
    color: #ffffff; 
    background-color: #B9D3EE; 
} 

Demo

Answer 2

您可以將您的a元素設置爲塊元素，以便它們將獲得父元素的所有寬度（演示：http://jsfiddle.net/WasWE/）。

ul li a:link, ul li a:visited, ul li a:active { 
    display: block; 
    color: blue; 
} 

ul li a:hover { 
    background-color: #B9D3EE; 
    color: #ffffff; 
}​ 

也可以添加hover事件li元素（演示：http://jsfiddle.net/XmwTV/）：

ul li:hover { 
    background-color: #B9D3EE; 
} 

ul li a:link, ul li a:visited, ul li a:active { 
    color: blue; 
} 

ul li a:hover { 
    color: #ffffff; 
}