Menu
Hello guys,
As the title says, I have a problem which I cannot figure out. I’ve been googling for a few hours now, tried a lot of different solutions but none worked so far.
The problem is of course the order in the IE7. All other browsers work as they should. I also know that this is a known bug in IE7 but that doesn’t help in anyway by knowing that ?)
The solutions I’ve tried are all about getting the submenu to be shown above the content, the content being in another separate div from the menu. In my case, I want the submenu to be on top of other items in the same div.
Here is a little quick example i’ve set up that shows the problem:
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
#wrapper {
width: 600px;
text-align: left;
margin: 0 auto;
}
#menu {
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
padding-right: 20px;
position: relative;
}
#menu ul ul {
margin-left: 0;
/*display: none;*/
position: absolute;
float: left;
width: 180px;
top: 20px;
left: 0;
z-index: 10010;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding-left: 0;
}
#menu ul ul li {
padding-right: 0;
position: relative;
}
#menu ul ul li a {
background-color: #fff;
width: 168px;
border-bottom: 1px solid #cccccc;
padding: 3px 6px;
display: block;
color: #707070;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”menu”>
<ul>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>submenu is here</a>
<ul>
<li><a href=””>1111111111111</a></li>
<li><a href=””>1111111111111</a></li>
<li><a href=””>1111111111111</a></li>
<li><a href=””>1111111111111</a></li>
</ul>
</li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
<li><a href=””>asdfa asdf asdf</a></li>
</ul>
</div>
</div>
</body>
</html>
Like I said, this of course works just fine in latest versions of major browsers.
Any ideas?