0

我有以下 CSS 菜单：

http://img233.imageshack.us/img233/4268/screenshot006jw.png

除了 IE6 和 IE7，菜单在任何地方都可以正常工作。

这是一些代码：

CSS（主要针对IE，其他浏览器类似）：

.menu {
    height:25px; 
    position:fixed; 
    z-index:100;
    font-family:arial, sans-serif;
}
* html .menu {
    z-index:100;
}
.menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    z-index:90;
}
.menu ul ul {
    visibility:hidden;
    position:realtive;
    height:0;
    top:30px;
    left:0; 
    width:140px;
    border-top:1px solid #000;
    z-index:120;
}
* html .menu ul ul {
    top:30px;
    t\op:30px;
    z-index:120;
    postion:relative;
}
.menu table {
    top:0; 
    left:0; 
    border-collapse:collapse;
    z-index:120;
    postion:relative;
}
.menu li {
    float:left;
    width:auto;
    position:relative;
    z-index:100;
}
.menu a, .menu a:visited {
    display:block;
    font-size:12px;
    text-decoration:none; 
    color:#fff; 
    width:auto; 
    height:30px; 
    border:1px solid #000; 
    border-width:1px 0px 1px 1px;
    background:#09c; 
    padding-left:10px; 
    line-height:29px; 
    font-weight:bold;
}
* html .menu a, * html .menu a:visited {
    width:120px; 
    w\idth:120px;
}

.menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#AD0101;
    z-index:100;
}
.menu ul ul a.drop:hover{
    background:#AD0101;
    z-index:100;
}
.menu ul ul a, .menu ul ul a:visited {
    background:#AD0101; 
    color:#fff; 
    height:auto; 
    line-height:1em; 
    padding:5px 10px; 
    width:140px;
    border-width:0 1px 1px 1px;
    z-index:100;
}
* html .menu ul ul a, * html .menu ul ul a:visited {
    width:140px;
    w\idth:140px;
    z-index:100;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
    visibility:visible;
}

这是我使用的HTML 语法：

<div class="menu">
    <ul>
        <li><a class="hide mittel" href="#">MenuItem1
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]>
            <table><tr><td>
            <![endif]-->
            <ul>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
            </ul>
            <!--[if lte IE 6]>
            </td></tr></table>
            </a>
            <![endif]-->
        </li>
        <li><a class="hide mittel" href="#">MenuItem2
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!-- more menu-items ... -->
    </ul>
</div>

这是我在 IE 6-7 中测试时看到的问题：

从屏幕截图中可以看出： 当我调整窗口大小时，主菜单分为两行，但看起来不错，没有任何布局问题。当我将鼠标悬停在具有子菜单的第一行中的项目上时，子菜单项不会与主菜单重叠......如您所见，我已经尝试了 z-index，但我猜要么不会改变任何东西，要么我做错了。那么，当使用Javascript调整窗口大小时，如何使子菜单与主菜单重叠？提前谢谢！

4

1 回答 1

0

1) .menu ul ul {position:relative;} 不是真实的。

2）如果这不能解决问题，请将子菜单位置设为绝对。IE6 和 IE7 尊重具有绝对定位的对象的 z-index 优于任何其他定义的 z-index。

于 2009-09-07T12:43:38.463 回答