Question

所以我在IE中显示错误的CSS下拉菜单有问题。在其他浏览器中，它的工作方式应该如此。

    <body>
<div id="container">
    <header>        
        <div id="hlogo">
            <a href="index.html">title</a>
        </div>
        <nav id="hmenu">
            <ul>
                <li>
                    <a href="menu1.html">menu1</a>
                </li>
                <li>
                    <a href ="menu2.html">menu2</a>
                    <div id="items" class="hiddenMenu">
                        <a href="submenu1.html">submenu1</a>
                        <a href="submenu2.html">submenu2</a>
                        <a href="submenu3.html">submenu3</a>
                        <a href="submenu4.html">submenu4</a>
                    </div>
                </li>
                <li>
                    <a  href ="menu3.html">menu3</a>
                </li>
                <li>
                    <a  href ="menu4.html">menu4</a>
                </li>
            </ul>
            </nav>
    </header>

    <section id="container-body">
        <div id="content">



        </div>
    </section>
</div>

所以这是我完整的HTML。它有一个由以下css提供的布局。

    /* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}

footer {
    display:block;
    position:relative;
    width:100%;
}
footer > #disclamer {

    margin-left: auto;
    margin-right: auto;
    width: 200px;
    padding-bottom:5px;
    font-size:small;
    font-weight: bold;
}
#container{
    background-color:#ffffff;
    margin:auto;
    min-width:756px;
    width:60%;
    overflow:hidden;
    border:solid 2px #666666;
    margin-top:10px;
    margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.6);
}

#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}

#hmenu{margin-top:45px;padding:10px;}

nav {
    list-style:none;
    display:inline;
    float:right;
}
nav ul{
    list-style: none;
    text-align:center;
    background-color:#666666;
    float:left;

}
nav ul li {
    width:128px;
    float:left;
    display:inline-block;
}
nav ul li:hover{
    background-color:#cc3333;
    cursor:pointer;
}
nav ul li a {
    color:#ffffff;
    padding:10px;
}

nav ul {
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor: pointer
}

section {margin:10px;}

#container > header {display:block;}

#container-body {
    background-color:#ececec;
    height:600px;
    display:block;
    overflow:auto;
}

#container-body  > #content {
    margin: 10px;
    height:95%;
    position:relative;
}
    .hiddenMenu 
{
    position:absolute;
    z-index: 150;
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor: pointer;
    width: inherit;
}
.hiddenMenu > a
{
    position:relative;
    text-align: left;
    clear:both; 
    font-size:0.75em;   
}


nav li .hiddenMenu > a
{
    display:none;
}
/*nav li:hover .hiddenMenu  > a
{
    display:block;
}*/

nav li .hiddenMenu  > a:hover
{
    background-color:#cc3333;   
    cursor:pointer;
    border: 1px black solid;
}

这是完整的CSS。

这是我使用的CSS。现在在Firefox中它可以正常工作。当我将菜单2项目悬停时，菜单会显示。在IE上它显示第一个子菜单项（子菜单1），然后它被清除，所以我甚至无法点击它。

我看不出我做错了所以如果你能帮助我，我会很感激。谢谢！

编辑：添加代码。

标头标签有一个overflow：hidden属性;如果我将其设置为可见，它将显示完整的菜单，但会完全搞乱我的布局。有没有办法绕过它或我做错了什么？

此外，我有一个jquery脚本将菜单上的显示设置为none / block相应，但在IE中，如果我将鼠标悬停在子菜单项上，菜单仍将被隐藏。为什么会这样？

Answer 1

根据我的经验，当你没有设置绝对定位对象的位置时，IE会有点错误。像top：0和left：例如0。

编辑：此外，绝对定位对象的父级应该具有位置：relative;如果该位置应使用父维度作为起点。

EDIT2： li：hover在IE6中不起作用我认为。不记得IE7了。其中一个只接受a：hover，而下面的浏览器可能都不是。 jQuery虽然解决了这样的问题。

<强> EDIT3：我不知道导航的东西是什么，我还没有跳到HTML5，所以我不知道以后它是否相关。但无论如何，我已经制作了适合你代码的东西。

脚本（jquery）：

$(document).ready(function () { 
  $('#hmenu ul li').hover(function () { 
    $(this).children('div').css('display', 'block'); 
  }, 
  function () { 
    $(this).children('div').css('display', 'none'); 
  }); 
});

CSS：

#hmenu {
    list-style: none;
    display: inline;
    float: right;
}

#hmenu ul {
    list-style: none;
    text-align: center;
    background-color: #666666;
    float: left;
}

#hmenu ul li {
    width: 128px;
    float: left;
    position: relative;
    display: inline-block;
}

#hmenu ul li:hover {
    background-color: #cc3333;
    cursor: pointer;
}

#hmenu ul li a {
    color: #ffffff;
    padding: 10px;
}

#hmenu ul {
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer
}

.hiddenMenu {
    display: none;
    position: absolute;
    top: 60;
    left: 0;
    z-index: 150;
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    width: inherit;
}

（对不起格式化，对此有点新意，但你可以在编辑器中应用源格式我猜。我改变了导航以获得id并将HTML导航改为div。就是这样。

HTML：

<div id="hmenu">
    <ul>
        <li>
            <a href="menu1.html">menu1</a>
        </li>
        <li>
            <a href="menu2.html">menu2</a>
            <div id="items" class="hiddenMenu">
                <a href="submenu1.html">submenu1</a>
                <a href="submenu2.html">submenu2</a>
                <a href="submenu3.html">submenu3</a>
                <a href="submenu4.html">submenu4</a>
            </div>
        </li>
        <li>
            <a href="menu3.html">menu3</a>
        </li>
        <li>
            <a href="menu4.html">menu4</a>
        </li>
    </ul>
</div>

Answer 2

您不能将名为 nav 的标记更改为 div ，然后重试。

IE Css下拉菜单问题

2 个答案: