anchor link nested in a li

Question

I'm creating a horizontal menu in my website and everything is OK but one thing. I have a link in each <li> and the color is set to white and li has no background, but in hover I want to set li background to white and links text color to black. The problem is that the width of <a> tags is not the same as <li> and when the mouse is over the part that is in <li> but not in <a> both become white.Anchor links can not have width property as far as I know, and I try different type of tricks but no success.Any idea?

#primary-menu ul li {
    list-style-type: none;
    float: left;
    background-image: url('menu-sep.png');
    background-repeat: no-repeat;
    background-position: right;
}

#primary-menu li a:hover {
    color: black;
}

#primary-menu li:hover {
    background-color: white;
    color: black;
}
#primary-menu li a {
    color: white;
    text-decoration: none;
    padding-right: 8px;
    margin-right: 8px;
    width: 100%;
    height: 23px;
}

`

Answer 1

hi, as you have written above that should be worked but you are saying that is not working then try by making class refered to only text like.

.liText
{
color:white;
}

.liText:hover
{
color:black;
}

hope this will work.

use class attribute with your tag. like

<a class="liText"> // for single class

if you want to use two or more classes for one tag then use another class after giving space as i mentioned below.

<a class="firstClass SecClass ThirdClass">

Answer 2

Check your <li> styling. They probably have padding. Remove it and the anchors should occupy the entire available space. Also, change the margin on the <a> tag to padding. Padding counts as part of the tag (ie, hovering over the padding makes it trigger the :hover pseudoselector), while margins do not.