html - 下拉菜单在 ie7 或 ie8 中无法正常显示

Question

我目前正在处理一个元素，但我遇到了下拉菜单及其在 ie7 和 ie8 中的显示方式的问题。

您可以在这里查看:

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

这是我使用的 CSS:

 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;

我对此不知所措，非常感谢任何帮助，谢谢。

Answer 1

你的问题要简单得多，IE 出于某种原因不接受你的 display:inline-block菜单导航项的声明。虽然您可以通过定位您的 nav 来修复它使用 .oldie 在 IE 中的菜单由 html5 样板提供的类并将其设置为 float:left相反，所以在你的 CSS 中试试这个:

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

顺便说一句，你需要声明一个z-index也为您的导航元素赋予值(value)，以便它们出现在其他所有元素之上，试试这个:

nav ul li {
    z-index: 999;
}