I created a webpage using the Skeleton Framework and added a CSS menu with a submenu. While the menu works well in most browsers, I encountered issues with the submenu when using IE7 and lower versions. Instead of appearing below the parent menu item, the submenu displays next to it in the middle of the menu itself.
Below is the code I used:
HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Education</a>
<ul>
<li><a href="#">Courses</a></li>
<li><a href="#">CV</a></li>
</ul>
</li>
<li><a href="#">Example</a></li>
</ul>
CSS code:
nav.primary ul ul {
position: absolute;
z-index: 999;
background: #000;
min-width:100%;
height:0px;
overflow: hidden;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}
nav.primary ul li:hover ul {
height:auto;
overflow: auto;
}
nav.primary ul ul li {
float:none;
display: list-item;
border-bottom: 1px solid #383737;
width:auto;
}
nav.primary ul ul li a {
display:block;
line-height: 35px;
text-transform: none;
}
Any assistance in resolving this issue would be highly appreciated.