drop down menu - hover von philinger, 23.07.2007 23:28

drop down menu - hover

philinger 23.07.2007 23:28

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>

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>

<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>

</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>

</ul> </li> </ul>

</div>

</body>

</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

philinger: drop down menu - hover

Beitrag lesen

drop down menu - hover

drop down menu - hover