drop down menu - hover
philinger
- css
hallo zusammen
bastle im moment an einem drop down menu.
es besteht aus vier Ebenen.
Das Menu soll nur zweifarbig sein.
Bei mouseover soll die farbe der Schrift mit der Hintergrundfarbe wechseln.
Soweit so gut :)
Nun wenn ich dann den Mauszeiger von der ebene eins auf ebene zwei bewege, dann wird der text auf der ebene eins wieder wie zuvor, jedoch bleibt der hintergrund gehovert!
sprich die Schrift hat nun auf ebene eins die selbe farbe wie der hintergrund!
jedoch hätte ich gerne alle ''aktiven'' also der gesamte weg von ebene eins bis ebene vier gehovert!
kann mir jemand weiterhelfen?
style type="text/css"
body { font: 78%/1.5 arial, helvetica, serif; background: white url(bgbaba.gif); text-align: center; padding: 0; margin: 2em; }
#container { width: auto; background: #3399ff; text-align: left; border: 2px solid #0066cc; margin: 0 auto; }
p { background: center no-repeat; margin: 1em 2em; }
p#smurf { background: transparent; text-align: left; font-weight: bold; color: #ffffff; }
#smurf strong { font-size: 2.0em; color: #ffffff; }
#nav, #nav ul { float: right; width: 72em; list-style: none; line-height: 1; background: #ffffff; font-weight: bold; padding: 0; border: solid #0066cc; border-width: 2px 0 2px 2px; margin: 0 0 1em 0; }
#nav a { display: block; width: 10em; w\idth: 6em; color: #0066cc; text-decoration: none; padding: 0.25em 2em; } #nav a:hover { color:#FFFFFF; }
#nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; }
#nav li { float: left; padding: 0; width: 10em; }
#nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: normal; border-width: 0.25em; margin: 0; }
#nav li li { padding-right: 1em; width: 13em }
#nav li ul a { width: 13em; w\idth: 9em; }
#nav li ul ul { margin: -1.75em 0 0 14em; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover { background: #0066cc; }
#content { clear: left; margin: 10em }
#content a { color: #ffffff; }
#content a:hover { text-decoration:none; }
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="container"> <p id="smurf">Welcome to the <strong> Net-folio</strong></p>
<ul id="nav">
<li><a href="#">Percoidei</a> <ul> <li><a href="#" class="daddy">Remoras</a>
<ul> <li><a href="#" class="daddy">Echeneis</a> <ul> <li><a href="#">Sharksucker</a></li> <li><a href="#">Whitefin Sharksucker</a></li> </ul> </li>
<li><a href="#" class="daddy">Phtheirichthys</a> <ul> <li><a href="#">Slender Suckerfish</a></li> </ul> </li> <li><a href="#" class="daddy">Remora</a> <ul>
<li><a href="#">Whalesucker</a></li> <li><a href="#">Spearfish remora</a></li> <li><a href="#">Marlinsucker</a></li> <li><a href="#">Remora</a></li> <li><a href="#">Ceylonese remora</a></li> </ul>
</li> <li><a href="#" class="daddy">Remorina</a> <ul> <li><a href="#">White suckerfish</a></li> </ul> </li> <li><a href="#" class="daddy">Rhombochirus</a>
<ul> <li><a href="#">R. osteochir</a></li> </ul> </li> </ul> </li> <li><a href="#" class="daddy">Tilefishes</a> <ul>
<li><a href="#">Caulolatilus</a></li> <li><a href="#">Lopholatilus</a></li> <li><a href="#">Malacanthus</a></li> </ul> </li> <li><a href="#" class="daddy">Bluefishes</a> <ul>
<li><a href="#">Pomatomus</a></li> <li><a href="#">Scombrops</a></li> <li><a href="#">Sphyraenops</a></li> </ul> </li> <li><a href="#" class="daddy">Tigerfishes</a> <ul>
<li><a href="#">Amniataba</a></li> <li><a href="#">Bidyanus</a></li> <li><a href="#">Hannia</a></li> <li><a href="#">Hephaestus</a></li> <li><a href="#">Lagusia</a></li> <li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li> <li><a href="#">Pelates</a></li> <li><a href="#">Pelsartia</a></li> <li><a href="#">Pingalla</a></li> <li><a href="#">Rhyncopelates</a></li> <li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li> <li><a href="#">Terapon</a></li> </ul> </li>
</ul> </li>
<li><a href="#">Anabantoidei</a>
<ul> <li><a href="#" class="daddy">Climbing perches</a> <ul> <li><a href="#">Anabas</a></li> <li><a href="#">Ctenopoma</a></li> </ul> </li>
<li><a href="#" class="daddy">Labyrinthfishes</a> <ul> <li><a href="#">Belontia</a></li> <li><a href="#">Betta</a></li> <li><a href="#">Colisa</a></li> <li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li> <li><a href="#">Parosphromenus</a></li> <li><a href="#">Sphaerichthys</a></li> <li><a href="#">Trichogaster</a></li> <li><a href="#">Trichopsis</a></li> </ul>
</li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li>
</ul> </li>
<li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li>
<li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> </ul>
</div>
</body>
</html>