Question

I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows:

li:hover {
    background-color: #222222;
    padding-top: 8px;
    padding-bottom: 9px;
}

And here’s a demo of what it actually looks like:

The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu’s background, and makes it look really dodgy/crap/cheap/yuck!

Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I’m screwed either way. How can I make little imperfections like this look the same in all browsers?

Update:

HTML (The menu):

            <ul class="menu">
                <li class="currentPage" href="index.php"><a>Home</a></li>
                <li><a href="services.php">Services</a></li>
                <li><a href="support.php">Support</a></li>
                <li><a href="contact.php">Contact Us</a></li>
                <li><a href="myaccount/" class="myaccount">My Account</a></li>
            </ul>

The CSS:

.menu {
    margin-top: 5px;
    margin-right: 5px;
    width: 345px;
    float: right;
}

li {
    font-size: 9pt;
    color: whitesmoke;
    padding-left: 6px;
    padding-right: 8px;
    display: inline;
    list-style: none;
}

li:hover {
    background-color: #222222;
    padding-top: 8px;
    padding-bottom: 9px;
}

Answer 1

You might prevent problems by not changing the padding based on the hover. Furthermore you should hover on the a

Does this work as expected?
JSFiddle example