Skeleton page css submenu ie7

Question

I made an HTML page based on Skeleton Framework and tried to add a css Menu with a submenu. The menu is working fine, but I experience problems with my submenu in IE7. The submenu works everywhere except on IE7 and lower. The submenu doesn't appear underneath the menu item it was posted, but next to it, in the middle of the menu itself.

Here 's my code:

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; /*list-item*/
border-bottom: 1px solid #383737;
width:auto;

}

nav.primary ul ul li a{
display:block;
line-height: 35px;
text-transform: none; 

}

Any help would be appreciated.

Answer 1

Try adding:

nav.primary ul ul {
    left:0;
    top:0;
}

If this doesn't help, please upload a sample or create a jsFiddle.. thx...

Alternatively you can change the top:0; into top:100%; to force it a 100% down, positioning it right under the menu.