Why does this img break hover state in ie?

Question

The pure CSS nav bar on this site www.seventhheavenvintage.com works flawlessly in Webkit and FireFox. In ie8 and ie9 (I don’t have access to other versions) the presence of the grey ribbon png that serves as the nav bar’s background somehow interrupts the hover state of nested li’s. This means that when I hover over a menu item that has sub items, when I move my cursor down to click on one, the sub items disappear. If I move my cursor very quickly however, it works. All of this is corrected however, when I remove the ribbon img from the site.

What I’ve tried:

• tested various z-index rules
• swapped out the png for a jpg
• moved the png from the nav to the header above and positioned absolute
• created a barebones nav with the same html/css for a sanity check

A hint that may help in discovering what is going on here: If I absolute position the png higher or lower the point at which the hover state breaks also moves higher or lower in a directly related manner.

Here is the relevant HTML:

<nav class="main">
    <img src="img/nav_ribbon_bw.png">
    <img src="../img/menu_bg_bw.png" style="display:none;"> <!-- for preloading submenu backgrounds -->
    <ul>
        <li>
            <a href="index.php">Home</a>
        </li>
        <li>
            <a href="javascript:;">About<span style="font-size: 6pt;">&nbsp;&#9660;</span></a>
            <ul>
                <li>
                    <a href="company.php">The&nbsp;Company</a>
                </li>
                <li>
                    <a href="team.php">The&nbsp;Team</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">Services<span style="font-size: 6pt;">&nbsp;&#9660;</span></a>
            <ul>
                <li>
                    <a href="rental.php">Rental&nbsp;Logistics</a>
                </li>
                <li>
                    <a href="event.php">Event&nbsp;Planning&nbsp;&amp;&nbsp;Design&nbsp;(Weddings)</a>
                </li>
                <li>
                    <a href="styling.php">Prop&nbsp;Styling</a>
                </li>
                <li>
                    <a href="questions.php">Frequently&nbsp;Asked&nbsp;Questions</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="collection.php">Collection</a>
        </li>
        <li>
            <a href="publication.php">Publications</a>
        </li>
        <li>
            <a href="http://www.blog.seventhheavenvintage.com">Blog</a>
        </li>
        <li>
            <a href="javascript:;" class="simpleCart_checkout">Contact</a>
        </li>
    </ul>
</nav>

Here is the relevant CSS:

nav.main {
    width: inherit;
    height: 40px;
    margin: 0px 0px 32px 0px;
    position: relative;
    float: left;
}
nav.main > img {
    width: 1102px;
    position: absolute;
    top:0px;
    left: -71px;
    display: block;
}
nav.main ul {
    list-style-type: none;
    text-align: center;
}
nav.main ul li {
    display: inline-block;
    position: relative;
    margin: 0px 3px;
}
nav.main a {
    display: block;
    height: 40px;
    padding: 0px 14px;
}
nav.main li ul {
    display: none;
    text-align: left;
}
nav.main li:hover ul {
    display: block;
    position: absolute;
    z-index: 10;
    background-image: url('../img/menu_bg_bw.png');
    background-size: 4px 40px;
    border-radius: 3px;
}

Answer 1

This seems to be caused by IE handling inline-block elements differently in versions 8 and 9. That can be solved (or actually, worked around) by just moving the <ul> elements a bit up the page. To relatively move an absolute element, you would simply need to define a negative margin:

nav.main li ul {
    margin-top:-11px;
}

That "fixes" it for IE8. IE9 is already a bit better, and needs less correction, so it already works when you move it up 3 pixels. To make it look a slight bit better, you could then also add a padding-top, so that it simply stretches further up, instead of moving the whole menu up.

Anyway, you wouldn't want to move your menus up 11 pixels for every browser, since this is simply a workaround. To apply the style to IE8 only, without having to mess with conditional comments, we could simply use one of the many CSS-valid ways to select IE8 only:

nav.main li ul {
    margin-top: -11px;
    padding-top: 11px;
}
:root nav.main li ul {
    /*Override the IE8-only style; these styles won't apply to IE8*/
    margin-top: initial;
    padding-top: initial;
}

But, since there is no CSS-valid way to apply styles to IE9 only, the best solution would be to just move the whole menu up 3 pixels (it doesn't look any worse for it). So, the final code would be:

nav.main li ul {
    margin-top: -11px;
    padding-top: 11px;
}
:root nav.main li ul {
    /*Override the IE8-only style; these styles won't apply to IE8*/
    margin-top: -3px;
    padding-top: 3px;
}

Adding those styles returns full functionality of your navigation menu, although it will look a bit less nice in IE8 (although, it already did, since IE8 decided not to use your custom font).