Frage stellen
Ich habe ein einfaches Dropdown-Menü gebastelt das später in einem Joomla! funktionieren soll.
Problem 1 (IE7):
Menü funktioniert im FF 3.6 und IE8 einwandfrei, nur im IE7 und kleiner nicht korrekt.
Wenn ich über einen Hauptmenüpunkt fahre, öffnet sich die darunterliegende Auflistung korrekt.
Wenn ich allerdings weiter nach unten zu den Unterpunkten möchte schließt sich das Menü dummerweise wieder. (Wenn ich die Maus nur über die Rahmen lotse bleibt das Menü offen es schließt erst wenn ich die Maus über ein <li> bzw. <span> bewege.)
Problem 2 (IE7:)
Wenn ich den Stylesheets ein
- Code: Alles auswählen
* { margin:0; padding:0; }
vorranstelle, wandert das Menü korrekt in die linke obere Ecke aber die Dropdown-Auflistung erhält lauter ca. 10px Abstände zwichen den einzelnen Aufzählungen.
Was mache ich falsch???
Hier noch der Quellcode:
index.htm:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<ul class="menu">
<li><a href="#"><span>Verein</span></a>
<ul>
<li><a href="#"><span>Chronik</span></a></li>
<li><a href="#"><span>Satzung</span></a></li>
<li><a href="#"><span>Mitglieder</span></a></li>
<li><a href="#"><span>Vorstand</span></a></li>
</ul>
</li>
<li><a href="#"><span>Kurse</span></a>
<ul>
<li><a href="#"><span>Angebote</span></a></li>
<li><a href="#"><span>Übungsleiter</span></a></li>
</ul>
</li>
<li><a href="#"><span>Veranstaltungen</span></a>
<ul>
<li><a href="#"><span>Termine</span></a></li>
<li><a href="#"><span>Bildergalerie</span></a></li>
</ul>
</li>
<li><a href="#"><span>Kontakt</span></a>
<ul>
<li><a href="#"><span>Impressum</span></a></li>
<li><a href="#"><span>Anfahrt</span></a></li>
</ul>
</li>
<li><a href="#"><span>Links</span></a></li>
</ul>
</body>
</html>
dropdown.css:
- Code: Alles auswählen
* { }
ul.menu li a { color:#000; text-decoration:none; }
ul.menu { position:relative; list-style-type:none; }
ul.menu li { float:left; }
ul.menu li span { display:block; font-family:verdana; font-size:11px; font-weight:bold; width:130px; height:23px; line-height:23px; text-align:center; border:1px solid #000; }
ul.menu li span:hover { color:#F00; }
ul.menu ul { list-style-type:none; position:absolute; visibility:hidden; padding:0; margin:0; }
ul.menu li:hover ul { visibility:visible; border:1px solid #0F0; }
ul.menu ul li { float:none; }
ul.menu ul li span { font-weight:normal; }
Ich bedanke mich schonmal im Vorraus für eure Hilfe.
