What is the css solution to this padding problem?

<div id="action-nav">
    <ul>
        <li><a href="#" class="selected">selected</a></li>
        <li><a href="#">selected</a></li>
    </ul>
</div>

and the styles:

#action-nav
{
    text-align:center;


}

#action-nav ul li
{

    height: 48px;
    width: 112px;
    list-style:none;
    float: left;
    margin-right:20px;

}

#action-nav ul li a
{
   text-decoration:none;
   padding-top :15px;
   height: 48px;
   width: 112px;
   开发者_如何转开发display: block;
}

#action-nav ul li:hover a
{
     color:#fff;

}

#action-nav ul li:hover, #action-nav ul li a.selected
{

    background-image: url('../Images/link_red_bg.jpg');
    color:#fff;


}

the a.selected class is the issue. It should look like it does in the adjacent li:hover style. What did I miss?

You need to subtract the padding from the height.

It might be repeating, in which case,

background-repeat: no-repeat;

use line-height instead of height

Try moving the "selected" class to the parent <li>.

Additionally, specifying the exact width and height of the child <a> is redundant; simply change both values to 100% so they automatically match the dimensions of the parent <li>.