IE 8 does not keep sub menu open when hovering

Question

I have a navigation menu on my site, with a sub menu on one of the links. The sub menu is shown when the user hovers over the parent level li element.

On modern browsers this works perfectly, however in Internet Explorer 8 hovering over the li shows the sub menu, and then immediately hides it as soon as you try to select any of the sub menus elements. This means that the sub menu becomes unusable as you simply can't select anything on it.

I've tried putting the sub menu directly underneath the li so that there can be no gap between them causing this but the problem persists.

I've put the code into a fiddle so you can see the issue yourself. Use the embedded link to view it properly in IE 8.

Fiddle (Source): http://jsfiddle.net/2gK5p/3/
Embedded (Best for IE 8 Compatibility): http://jsfiddle.net/2gK5p/3/embedded/result/

Heres the HTML:

<ul>
    <li class="selected"><a href="#">Home</a></li>
    <li><a href="#">Services</a>
        <ul class="subnav-wrapper">
            <span class="container block">
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 1</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 2</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 3</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
            </span>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

And the CSS:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

ul {
    list-style: none;
}
li {
    float: left;
    margin: 0 8px;
}
li:hover a {
    text-decoration:none;
}
li:hover .subnav-wrapper {
      display: block; 
}
.subnav-wrapper {
  background-color: green;
  width: 100%;
  position: absolute !important;
  padding: 20px 0;
  display: none;
  top: 36px;
  left: 0;
}
.subnav-wrapper .container {
    float: none; 
}
.subnav {
    float: left;
    width: 33%;
    padding: 0 2%;
    position: relative; 
}
.subnav li {
    width: 100%;
    float: left;
    margin: 0; 
}
.subnav li a {
    width: 100%;
    float: left;
    padding: 5px 10px; 
}

.subnav li .subnav-heading {
      text-align: center;
      padding: 12px 10px;
      margin: 0 0 12px;
      font-size: 1.2em;
      color: white;
      background-color: blue; 
}

Thanks for any help with this!

Answer 1

You have a little gap under the li and the sub menu in IE.

You can fill it with a pseudo element to increase area of li : DEMO

li:after {
    content:'';
    display:block;
    height:8px;
    margin-bottom:-8px;
}