html - 尝试使用 JS 在窗口调整大小时使子菜单与 IE 中的主菜单重叠？

Question

我有以下 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 调整窗口大小时，如何使子菜单与主菜单重叠？提前致谢!

Answer 1

1) .menu ul ul {position:relative;} not realtive.

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