Vertikale dropdown menu
Mijn CSS probleem is als volgt:
Ik heb een eenvoudig HTM file aangemaakt, waarin de dropdown menu weergegeven wordt. Hellas ben ik nog steeds niet geslaagd om INactive menu items ondergeschikt te hebben onder de active menu items.
Voorbeeld: Als ik mijn muis over de menu item 'Een' plaats, krijg ik wel zijn SUB menu items, maar alle onderliggende menu items blijven over die sub items heersen. Hoe kan ik het vermijden? Ik probeerde met 'z-index', maar het hielp niet. Ik werk onder Microsoft Internet Explorer versie 6.
Met vriendelijke groeten van Jan de Vrije.
De HTM code is als volgt:
<html>
<head>
<title>Menu test</title>
<style type="text/css">
body
{
font-family: arial, helvetica, serif;
}
#nvg
{
padding: 10;
margin: 5;
list-style: none;
float : left;
width : 250px;
background: green;
border: 2px solid red;
}
#nvg ul
{
padding: 10;
margin: 5;
list-style: none;
float : left;
width : 225px;
background: blue;
border: 2px solid green;
}
#nvg li
{
position : relative;
float : left;
line-height : 25px;
margin-bottom : -1px;
width: 200px;
background: red;
border: 2px solid black;
}
#nvg li ul
{
position : absolute;
left: -999em;
margin-left : 150px;
margin-top : -50px;
background: yellow;
border: 2px solid green;
}
#nvg li ul li
{
position : relative;
float : left;
line-height : 25px;
margin-bottom : -1px;
width: 200px;
background: x;
border: 0px solid black;
}
#nvg li ul li ul
{
position : absolute;
left: -999em;
margin-left : 150px;
margin-top : -50px;
background: green;
border: 2px solid blue;
}
#nvg li ul ul
{
left: -999em;
}
#nvg li a
{
width: 11em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nvg li a:hover {
color : white;
background-color : black;
}
#nvg li:hover ul ul,
#nvg li.sfhover ul ul,
{
left: -999em;
}
#nvg li:hover ul ul ul,
#nvg li.sfhover ul ul ul
{
left: -999em;
}
#nvg li:hover ul,
#nvg li.sfhover ul,
{
left: auto;
}
#nvg li li:hover ul,
#nvg li li.sfhover ul,
{
left: auto;
}
#nvg li li li:hover ul,
#nvg li li li.sfhover ul
{
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nvg").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="nvg">
<ul>
<li><a href="#">Een</a></li>
<ul>
<li><a href="#">Een-aaa</a></li>
<ul>
<li><a href="#">Een-aaa-111</a></li>
<li><a href="#">Een-aaa-222</a></li>
<li><a href="#">Een-aaa-333</a></li>
</ul>
<li><a href="#">Een-bbb</a></li>
<ul>
<li><a href="#">Een-bbb-444</a></li>
<li><a href="#">Een-bbb-555</a></li>
<li><a href="#">Een-bbb-666</a></li>
</ul>
<li><a href="#">Een-ccc</a></li>
<ul>
<li><a href="#">Een-ccc-777</a></li>
<li><a href="#">Een-ccc-888</a></li>
<li><a href="#">Een-ccc-999</a></li>
</ul>
</ul>
<li><a href="#">Twee</a></li>
<ul>
<li><a href="#">Twee-ddd</a></li>
<ul>
<li><a href="#">Twee-ddd-111</a></li>
<li><a href="#">Twee-ddd-222</a></li>
<li><a href="#">Twee-ddd-333</a></li>
</ul>
<li><a href="#">Twee-eee</a></li>
<ul>
<li><a href="#">Twee-eee-111</a></li>
<li><a href="#">Twee-eee-222</a></li>
<li><a href="#">Twee-eee-333</a></li>
</ul>
<li><a href="#">Twee-fff</a></li>
<ul>
<li><a href="#">Twee-fff-444</a></li>
<li><a href="#">Twee-fff-555</a></li>
<li><a href="#">Twee-fff-666</a></li>
</ul>
</ul>
<li><a href="#">Drie</a></li>
<ul>
<li><a href="#">Drie-ggg</a></li>
<ul>
<li><a href="#">Drie-ggg-111</a></li>
<li><a href="#">Drie-ggg-222</a></li>
<li><a href="#">Drie-ggg-333</a></li>
</ul>
<li><a href="#">Drie-hhh</a></li>
<ul>
<li><a href="#">Drie-hhh-111</a></li>
<li><a href="#">Drie-hhh-222</a></li>
<li><a href="#">Drie-hhh-333</a></li>
</ul>
<li><a href="#">Drie-iii</a></li>
<ul>
<li><a href="#">Drie-iii-111</a></li>
<li><a href="#">Drie-iii-222</a></li>
<li><a href="#">Drie-iii-333</a></li>
</ul>
</ul>
</ul>
</div>
</body>
</html>
Er zijn nog geen reacties op dit bericht.