nicht angemeldet
DropDown Menü auf CSS/HTML Basis ist dauerhaft offen warum ? Hallo allerseits...
Ich muss zu anfang gleich erwähnen das ich mir über diverse Tutorials vor einigen Jahren den Aufbau einer Webspell Page angeeignet habe. Und diese via Dreamweaver zusammensetze halt mit Tabellen (Ihr wisst sicherlich wie ich das meine :D) Habe bislang wenn ich meine Webspell Pages gemacht habe mit direkter Navigation über die Tabelle gearbeitet... Also Hintergrund Bild oder auch Roll-Over Bild mit Link halt... Nun wollte ich mich dran Probieren ein Roll-Over Button zu nehmen und diesen mit einem Dropdown Menü auszustatten... Soweit sogut... Bin auch soweit gekommen das mir des Menü angezeigt wird... Nur leider funktioniert aus irgend welchen Gründen der Hover nicht O_o also kurz um wird dauerhaft Aktiv angezeigt... Habe mal einen Screenshot mit beigehangen da sich die Page noch nicht aufm Webspace befindet... Und natürlich die nötigen Code Schnippsel
Und wenn ich unter # Submenü (Display None) eintrage taucht des Menü gar net auf
</head><body onload="MM_preloadImages('Bilder/GallingerDR_08.jpg','Bilder/GallingerDR_09.jpg','Bilder/GallingerDR_10.jpg','Bilder/GallingerDR_11.jpg')"><center><table width="1000" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="Bilder/GallingerD_01.jpg" width="1000" height="131" /></td> </tr> <tr> <td><table width="1000" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="682"><img src="Bilder/GallingerD_02.jpg" width="683" height="160" /></td> <td width="291" background="Bilder/GallingerD_03.jpg"> </td> <td width="27"><img src="Bilder/GallingerD_04.jpg" width="27" height="160" /></td> </tr> </table></td> </tr> <tr> <td><img src="Bilder/GallingerD_05.jpg" width="1000" height="18" /></td> </tr> <tr> <td><table width="1000" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="71"><img src="Bilder/GallingerD_06.jpg" width="71" height="55" /></td> <td width="94" ><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image34','','Bilder/GallingerDR_07.jpg',0)"><img src="Bilder/GallingerD_07.jpg" name="Image34" width="94" height="55" border="0" id="Image34" /></a> <nav> <ul id="submenu"> <li><a href="#">NEWS</a></li> <li><a href="#">NEWS2</a></li> <li><a href="#">NEWS3</a></li> <li><a href="#">NEWS4</a></li> </ul> </nav> </td> <td width="112"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','Bilder/GallingerDR_08.jpg',1)"><img src="Bilder/GallingerD_08.jpg" name="Image30" width="112" height="55" border="0" id="Image30" /></a> <nav> <ul id="submenu"> <li><a href="#">NEWS</a></li> <li><a href="#">NEWS2</a></li> <li><a href="#">NEWS3</a></li> <li><a href="#">NEWS4</a></li> </ul> </nav> </td> <td width="110"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','Bilder/GallingerDR_09.jpg',1)"><img src="Bilder/GallingerD_09.jpg" name="Image31" width="110" height="55" border="0" id="Image31" /></a> <nav> <ul id="submenu"> <li><a href="#">NEWS</a></li> <li><a href="#">NEWS2</a></li> <li><a href="#">NEWS3</a></li> <li><a href="#">NEWS4</a></li> </ul> </nav> </td> <td width="116"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','Bilder/GallingerDR_10.jpg',1)"><img src="Bilder/GallingerD_10.jpg" name="Image32" width="116" height="55" border="0" id="Image32" /></a> <nav> <ul id="submenu"> <li><a href="#">NEWS</a></li> <li><a href="#">NEWS2</a></li> <li><a href="#">NEWS3</a></li> <li><a href="#">NEWS4</a></li> </ul> </nav> </td> <td width="97"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image33','','Bilder/GallingerDR_11.jpg',1)"><img src="Bilder/GallingerD_11.jpg" name="Image33" width="97" height="55" border="0" id="Image33" /></a> <nav> <ul id="submenu"> <li><a href="#">NEWS</a></li> <li><a href="#">NEWS2</a></li> <li><a href="#">NEWS3</a></li> <li><a href="#">NEWS4</a></li> </ul> </nav> </td> <td width="400"><img src="Bilder/GallingerD_12.jpg" width="400" height="55" /></td> </tr> </table></td> </tr>
nav ul li{ background: #222222; display: block; text-decoration: none; }
nav ul li a{ color: #222222; padding: 2px; display: block; text-decoration: none; }
#submenu { position: absolute; background: #222222; display: block;}
#submenu li a{ display: block;}
nav li:hover #submenu{ display: block;}
Gunnar Bittersmann
Rolf b
Der Martin
Auge
Tabellenkalk
marctrix
MudGuard