My website has a navigation menu with a sub-menu that appears when hovering over the parent element. While this works smoothly on modern browsers, Internet Explorer 8 presents an issue. When hovering over the parent li element in IE 8, the sub-menu is displayed briefly and then disappears as soon as you try to select any of its elements. This renders the sub-menu unusable as it cannot be interacted with.
I have attempted to fix this by placing the sub-menu directly under the li element to eliminate any gaps causing the problem, but the issue persists.
To see the problem for yourself, I have included the code in a fiddle:
Fiddle (Source): http://jsfiddle.net/2gK5p/3/
Embedded Link (Best for IE 8 Compatibility): http://jsfiddle.net/2gK5p/3/embedded/result/
Here is the HTML code:
<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 here is the CSS code:
*, *: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;
}
Any help with resolving this issue would be greatly appreciated!