IE Css下拉菜单问题
所以我有一个CSS下拉菜单在IE中显示错误的问题。在其他浏览器中,它的工作方式应该如此。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中,它可以正常工作。菜单显示当我悬停menu2项目。在IE上它显示第一个子菜单项(子菜单1),然后它被清除,所以我甚至不能点击它。
我看不出我做错了什么,所以如果你能帮助我,我将不胜感激。谢谢!
编辑:添加代码。
头标记有一个overflow:hidden属性;如果我将其设置为可见,则会显示完整菜单,但会完全混乱我的布局。有没有办法绕过它,或者我做错了什么?
另外,我有一个jquery脚本来将菜单上的显示设置为none/block,但在IE中,如果我将鼠标悬停在子菜单项上,菜单仍将隐藏。为什么会发生?
根据我的经验,当你没有设置绝对定位对象的位置时,IE会有点bug。像top:0和left:0。
编辑: 此外,绝对定位的对象的父应该有position:relative;如果该位置应该使用父维度作为起点。
编辑2: 李:悬停不能在IE6中工作我认为。不记得有关IE7。其中一个只会接受:悬停,下面的浏览器可能都不是。 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>
您不能有一个标记名为nav将其更改为div并再试一次。
我固定的问题已经与一些JavaScript我挑在某处 - 通过谷歌去那里,不记得网站的名称。 – Alka 2011-01-20 23:28:36
李:当我将鼠标悬停在它显示菜单项悬停不工作可能 – 2011-01-20 23:14:39
,所以我认为这是工作 – Alka 2011-01-20 23:27:16