Question

I have a nav menu that changes the background color on hover. Below are two images. The first image shows the behavior that I have in all browsers but IE 8 (haven’t tested anything below 8). The second image shows the behavior in IE 8. I would like IE 8 to look like everything else (filling the nav bar). I’ve also posted the CSS and ASP.Net for the menu. Any help is appreciated!

ASP.Net

<ul id="mainNav" runat="server">
    <li><asp:HyperLink runat="server" NavigateUrl="~/Home.aspx">Home</asp:HyperLink></li>
    <li><asp:HyperLink runat="server" NavigateUrl="~/Vendors.aspx">Our Vendors</asp:HyperLink></li>
    <li><asp:HyperLink runat="server" NavigateUrl="#">Customer Support</asp:HyperLink></li>
    <li><asp:HyperLink runat="server" NavigateUrl="#">Technical Assistance</asp:HyperLink></li>
    <li><asp:HyperLink runat="server" NavigateUrl="SalesExecutives.aspx">AMS Sales Assistance</asp:HyperLink></li>
</ul>

CSS

ul#mainNav {
    float: right;
    margin: 8px 0 0 0;
}

ul#mainNav li {
    font-size: 14px;
    color: #746935;
    float: left;
}

ul#mainNav li a {
    color: #746935;
    text-decoration: none;
    padding: 8px 8px 9px 8px;
}

ul#mainNav li a:hover, ul#mainNav li a.active {
    color: #ffffff;
    background-color: #746935;
    padding: 8px 8px 9px 8px;
}

Answer 1

Make your a elements display: block:

ul#mainNav li a {
    display: block;

    color: #746935;
    text-decoration: none;
    padding: 8px 8px 9px 8px;
}