Hover not working in FF - html

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;
}
In IE the above code will highlight the complete cell when hovered.
But in FF it will only highlight the link that is within it.
I would like FF to highlight the complete cell as IE does.
Here is the list:
Keep in mind that only the first link has been created because I have just started creating this list and stopped to test it when I noticed this problem.
<ul>
<li>beauty</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>
Any help is much appreciated!

Answer 1

You can make your a elements as block elements, so they will get all width of parents elements (demo: 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;
}​
Or you can add hover event to li elements (demo: 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;
}

Answer 2

Hi now remove with 100% in your anchor link css and define display block in you css in anchor
as like this
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