1

我有一个简单的菜单，当悬停时它会有一个下拉菜单。该代码在 Fiddle 中测试时有效，但在本地运行整个页面时在 IE 上无效。谁能帮忙

（这是我的小提琴代码）[http://jsfiddle.net/bACbW]

<DIV align="left" id="floating-menu"><FONT class="subheading">
<ul class="dropmenu">
    <li><a href="#">MAIN MENU</a>
<ul class="dropmenu">
<li>WELCOME</li>
<li>PERSONAL INFORMATION</li> 
</ul> 
     </li>
</ul>
</FONT></DIV>

一般的.css

    /* All UL */
    #floating-menu ul {
    list-style-type: none;
    width: auto;
    height: 30px;
    background: #FF0040;
}

/* All LI */
#floating-menu ul li {
        padding: 5px 10px;
        height: 30px;
        position: relative;

}

/* First Level LI */
#floating-menu>ul>li {
    float: left;
    height: 30px;
    line-height: 27px;
    text-aligh: center;
    color: #9c9c9c;
}


#floating-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    width: 200px;

}


#floating-menu li:hover ul {
    display: block;

}

#floating-menu li li {
    border-bottom: 1px solid #ffffff;

}

#floating-menu li li:hover {
    background: #5e8ce9;
}

.dropmenu {
    _zoom:1;
}

.dropmenu:after {
    content: "";
    clear: both;
    display: block;
}
4

2 回答 2

4

检查此处的jsFiddle链接以及更正的 CSS 下方。还在 Firefox、chrome 和 ie 7、8 和 9 中进行了测试。它工作正常。

#floating-menu {
    width:940px;
    padding:10px;
    *padding:5px 10px;
    margin:0 auto;
    border:1px  solid green;
    background-color:#3D3A40;
    border:8px solid #fff;
    }   
#floating-menu ul {
    list-style-type: none;
    line-height:30px;
    background: #FF0040;
    }
#floating-menu ul li {
    position:relative;
    display:inline-block;
    *float:left;
    }
#floating-menu ul li a {
    color:#fff;
    text-decoration:none;
    display:block;
    padding:0 20px;
    cursor:pointer;
    }
#floating-menu ul li:hover a {
    color:#fff;
    background-color:#5e8ce9;
    cursor:pointer;
    }
#floating-menu ul li ul {
    display:none;
    position:absolute;
    left:0;
    top:30px;
    background-color:#5e8ce9;
    width:200px;
    line-height:18px;
    }
#floating-menu ul li ul li {
    border-bottom:1px solid #91b3f7;
    display:block;
    *float:none;
    }
#floating-menu ul li ul li a {
    color:#fff;
    background-color:#0066FF;
    cursor:pointer;
    padding:5px 10px;
    }
#floating-menu ul li ul li a:hover,
#floating-menu ul li ul li a.active {
    color:#fff;
    background-color:#0000FF;
    }
#floating-menu ul li:hover ul {
    display:block !important;
    }

.dropmenu {
    _zoom:1;
    }
于 2013-07-18T12:36:57.997 回答
1

正如我在评论中所说，您的代码在 IE9 中运行良好。

原因，按 F12 获取开发者工具并更改document type.

正如你所说，它处于怪癖模式

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

通过告诉 IE 在您的页面中使用其渲染引擎的最新版本。如果您的用户只有 IE8 浏览器？这肯定会失败。

您可以在MSDN Library中查看。

希望你能理解。

于 2013-07-18T12:01:50.727 回答