Question

I have the following css which works when I mouse over it in Firefox but not IE(6).

.PageMenu{
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline;
    list-style-position:outside;
}

.PageMenu li{

    display: block;
    padding: 0;
    margin: 0;
    line-height: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;

}

ul#PageMenu li:hover {
   color: #000;
   background-color: #ddd; 
}

The HTML is:

<ul class="PageMenu" id="PageMenu">
    <li>       
        <a title="test" class="getPage">Click this link</a>
    </li>
    <li>
        <a title="test" href="#" class="getPage">Link text</a>
    </li>
</ul>

I’m looking for a css solution which will work in both IE(specifically 6) and Firefox.

Answer 1

You cannot assign a :hover rule to anything but <a> elements in IE6. Try

ul#PageMenu a:hover {
   color: #000;
   background-color: #ddd;
}


ul#PageMenu a {
   display: block;
   width:100%;
}