Question

Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it’s appears like inline block and it’s too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.

any help or advice will be appreciated!

http://jsfiddle.net/an4Ng/

My code is:

nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}

nav ul li{
    float:left;
    position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{

text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
    overflow:visible;
    position:static;
}

nav ul li ul{
    width: auto; height: auto;  
    display:block;
    position:absolute;
    border:3px solid gray;
background-color: black; 
}
nav ul li ul li a{
    text-decoration:none;
    font-size:large;
    margin-top:15px;

}

nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}

Answer 1

I just threw this together but how’s this?

http://jsfiddle.net/PgVQC/3/

Obviously I haven’t tested it in IE7 but it’s how I tend to do my dropdown menus.

You might have to throw in a bit of jquery to get the menu to display in IE7, here’s an example from a site I built a few weeks ago.

http://jsfiddle.net/9L4EC/2/