IE Css dropdown menu problem
So i have an issue with a CSS dropdown menu being displayed wrong in IE. In other browsers it works like it should.
<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>
So this is my complete HTML. It has a layout provided by the following 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;
}
This is the full CSS.
This is the CSS i use. Now in firefox it works as it should. The menu is show when i hover the menu2 item. On IE it shows the first submenu item (submenu1) and then it is cleared so i can't even click it.
I can't see what i'm doing wrong so if you can help me i would appreciate it. Thanks!
edit: added code.
The header tag has an overflow:hidden attribute; if i set that to visible it will show the complete menu but will mess up my layout completely. Is there a way around it or am开发者_JAVA技巧 i doing something wrong?
Also, i have a jquery script to set the display on the menu to none/block accordingly but in IE if i hover on the submenu items the menu will still be hidden. Why does this happen?
In my experience IE gets a bit buggy when you don't set the positions of an absolute positioned object. Like top: 0 and left: 0 for instance.
Edit: Also, parent of the absolute positioned object should have position: relative; if the position should be using the parent dimensions as a starting point.
Edit2: li:hover doesn't work in IE6 I think. Can't remember about IE7. One of them will only accept a:hover, and browsers below maybe none of them. jQuery solves things like that though.
Edit3: I don't know what the nav stuff is, I haven't jumped to HTML5 so I don't know if it's relevant later. But anyway I've made something that works of your code.
Script (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;
}
(sorry for the formatting, bit new to this, but you can apply source formatting in your editor I guess. I changed the navs to have the id and changed the HTML nav to be div. That's it.
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>
You cannot have a tag named nav change it to div and try again.
加载中,请稍侯......
精彩评论