Hello all you ravishingly handsome computer nerds,
I'm having a problem with a menu, and I'm not sure if I'm stupid, css is stupid, or both. The problem is as follows (reduced to bare bones html + css) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
ul.leftmenu {
list-style-type: none;
}
ul.leftmenu li {
background-color: yellow;
position: relative;
z-index: 0;
}
ul.leftmenu li ul {
position: absolute;
left: 90px;
top: 0px;
z-index: 1;
display: none;
list-style-type: none;
}
ul.leftmenu li:hover ul {
display: block;
}
ul.leftmenu li ul li {
background-color: green;
z-index: 2;
}
</style>
</head>
<body>
<ul class="leftmenu">
<li><a href="getpage.asp?i=1">HOM
E</a></li>
<li><a href="getpage.asp?i=3">Pro
ducten</a>
<ul>
<li><a href="getpage.asp?i=4">Kun
ststof transportbanden</a></li>
<li><a href="getpage.asp?i=5">Rub
ber transportbanden</a></li>
</ul></li>
<li><a href="getpage.asp?i=12">Se
rvice</a><
/li>
<li><a href="getpage.asp?i=13">Al
bum</a><ul
>
<li><a href="getpage.asp?i=14">Ku
nststof transportbanden</a></li>
<li><a href="getpage.asp?i=15">Ru
bber transportbanden</a></li>
<li><a href="getpage.asp?i=22">Co
ntact</a><
/li>
<li><a href="getpage.asp?i=23">Ro
ute</a></l
i>
</ul>
</body>
</html>
The submenus are hidden beneath the main menu items following the main menu-item, even though I set the z-index higher. It does it in all major browsers, so clearly I'm doing something wrong, but I can't figure it out. Can anyone tell me how I accomplish the kind of behavior?
Thanks a lot,
Menno
Start Free Trial