Question

I am currently working on a project and I am having problems with the dropdown menu and how it is displaying in ie7 and ie8.

You can view it here:

http://getsmarta.co/_cms/topflight/

Here is the css I am using:

 nav {  width:1026px;
height: 50px;
background-image:url(../img/nav.png);
padding:0 0px 0 0px;
text-align:center;
margin-bottom:30px;

}

nav ul li  {
display:inline-block;
position:relative;

}

nav ul li div.sub {
display:none;
position:absolute;
background-color:#003e88;
top:38px;
width:260px;
text-align:left;
border-radius: 0px 0px 7px 7px;
-o-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;

}

nav ul li div.sub a{
background-image:none;

}

nav li a {
padding:13px 20px 11px 20px;
display:inline-block;
margin-top:-10px;
background-image:url(../img/nav-divider.png);
background-position:top right;
background-repeat:no-repeat;
font-family:champ, myriad, Arial, Helvetica, sans-serif;
font-size:16px;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
margin-right:-4px;

}

nav li a:hover {border: 0;
background-image:url(../img/hover.png);

}

nav li.current a {
color:#47cacd;

}

I am at a loss with it and any help would be greatly appreciated, Thanks.

Answer 1

Your problem is much simpler then that, IE for some reason is not accepting your display:inline-block declaration for your menu nav items. Though you can fix it by targeting your nav menu in IE by using the .oldie class provided by the html5-boilerplate and setting it to float:left instead, so try this in your CSS:

.oldie nav li {
  float:left;
  z-index:9999;
}

By the way, you need to declare a z-index value to your nav elements as well in order for them to appear on top of everything else, try this:

nav ul li {
    z-index: 999;
}