CSS菜单IE7问题

Question

菜单适用于所有主流浏览器，但在IE7中看起来有所不同。请参阅下面的屏幕截图 查看http://jsfiddle.net/FQLdm/6/

上的演示

将鼠标悬停在主页链接上时，您会看到一个子菜单。在IE7中，菜单按钮和子菜单都被向上推。

当替换

时，就会发生这种情况

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:block;
    float:left;
}

使用此（我需要使用这种方式inline-block将列表项置于中心位置）

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}

在Chrome中看起来不错

在IE7中，它看起来与众不同。请注意主页按钮是如何抬起的。它应该看起来像上面的chrome截图。

Answer 1

类似这样的事情

将它放在头部

的yore html文件中

<!--[if lte IE 7]>
  <style>
    .menu1 ul li ul {
        position:absolute;
        top: 5px or 10px;
     }
     .menu1 {
       position: relative;
     }
  </style>        
<![endif]-->