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.

I am not sure if this is your issue but min-width will not work in IE7, use width 100% instead. and as suggested by kevinius might help to create [fiddle](http://jsfiddle.net/) — Martyn0627, Sep 21 '13 at 17:08

score 0 · Accepted Answer · edited Sep 21 '13 at 17:10

0

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.

edited Sep 21 '13 at 17:10

Josh Crozier

233,099
56
391
304

answered Sep 21 '13 at 17:07

kevinius

4,232
7
48
79

Your code with top: 100 % is working. Thank You. Only thing that stays is :hover is not working properly, as my submenu disappears as i hover it. But I'll try looking a bit further into that first. – JoJo Sep 21 '13 at 17:36

Skeleton page css submenu ie7

1 Answers1