Listennavigation - letzter Listenpunkt springt
peddaa
- html
Mahlzeit!
ich hoffe Ihr habt ne Lösung für mich.
Mein Problem:
Kämpfe gerade nach jahrelanger HTML-Abstinenz mit einer horizontalen Navigationsstruktur.
4 Menüpunkte und nur der dritte hat noch Unterpunkte.
Hab ich alles mit ner Liste "gelöst". Jetzt springt aber bei hover über dem 3. Punkt der 4. ständig zur Seite.
Warum kann ich mir ungefähr vorstellen, hab aber überhaupt keine Lösung dafür.
Was mach ich falsch?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#navi ul {
margin:0px;
padding:0px;
list-style:none;
text-indent:0px;
}
#navi ul li{
float:left;
margin-right:20px;
}
#navi li ul {
display:none;
}
#navi li:hover ul {
display:block;
}
#navi ul a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
text-transform:uppercase;
color:black;
}
#navi ul a:hover {
color:red;
}
#navi li ul a {
font-size:9px;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Untitled1</a></li>
<li><a href="#">Untitled2</a>
<ul>
<li><a href="#">Subnavigation1</a></li>
<br /><li><a href="#">Subnavigation2</a></li>
<br /><li><a href="#">Subnavigation3</a></li>
<br /><li><a href="#">Subnavigation4</a></li>
<br /><li><a href="#">Subnavigation5</a></li>
<br /><li><a href="#">Subnavigation6</a></li>
</ul></li>
<li><a href="#">Untitled3</a></li>
</ul>
</div>
</body>
</html>
Greetz, Peddaa
Warum kann ich mir ungefähr vorstellen, hab aber überhaupt keine Lösung dafür.
Lass uns an deinem Wissen teilhaben - wo liegt deiner Meinung nach der Fehler?
Was mach ich falsch?
Das HTML z.B. - ein br-Element kann kein Kind eines ul-Elements sein.
»» Warum kann ich mir ungefähr vorstellen, hab aber überhaupt keine Lösung dafür.
Lass uns an deinem Wissen teilhaben - wo liegt deiner Meinung nach der Fehler?»» Was mach ich falsch?
Das HTML z.B. - ein br-Element kann kein Kind eines ul-Elements sein.
Vielleicht lieg ich falsch, aber margin-right wird auf alle li angewendet. Weil der 4. Punkt genau 20px nach rechts springt. Datt soll er aber nicht.
Das HTML z.B. - ein br-Element kann kein Kind eines ul-Elements sein.
Wie erzwing ich sonst einen Zeilenumbruch im Block? Meine Listeneinträge sind nämlich unterschiedlich lang und ich will alle schön untereinander haben.
Vielleicht lieg ich falsch, aber margin-right wird auf alle li angewendet. Weil der 4. Punkt genau 20px nach rechts springt. Datt soll er aber nicht.
Du willst also nur die zweite Ebene einrücken, die erste aber nicht? mit anderen worten #navi>ul>li
soll anders formatiert sein als #navi>ul>li>ul>li
Wie erzwing ich sonst einen Zeilenumbruch im Block? Meine Listeneinträge sind nämlich unterschiedlich lang und ich will alle schön untereinander haben.
Ich fürchte ich kann dir da nicht ganz folgen.
»» Vielleicht lieg ich falsch, aber margin-right wird auf alle li angewendet. Weil der 4. Punkt genau 20px nach rechts springt. Datt soll er aber nicht.
Du willst also nur die zweite Ebene einrücken, die erste aber nicht? mit anderen worten
#navi>ul>li
soll anders formatiert sein als#navi>ul>li>ul>li
»» Wie erzwing ich sonst einen Zeilenumbruch im Block? Meine Listeneinträge sind nämlich unterschiedlich lang und ich will alle schön untereinander haben.
Ich fürchte ich kann dir da nicht ganz folgen.
Ich will einfach nur das wenn ich über den 3.Menüpunkt mit der Maus fahre, sich die Subnavi einblendet und der 4. Menüpunkt sich nicht bewegt.
Und in der Subnavi sind dann mehrere Naviagtionspunkte die schöön untereinander stehen solln. Nur mit dem "display:block" hatte ich da Probleme, weil die Einträge unterschiedlich lang sind. Deshalb mein Versuch mit dem Zeilenumbruch. Klappt auch. Dachte jetzt nicht das das ein Problem ist.
Und in der Subnavi sind dann mehrere Naviagtionspunkte die schöön untereinander stehen solln. Nur mit dem "display:block" hatte ich da Probleme, weil die Einträge unterschiedlich lang sind. Deshalb mein Versuch mit dem Zeilenumbruch. Klappt auch. Dachte jetzt nicht das das ein Problem ist.
position: relative;
~~~ für die li-Elemente der ersten Ebene
`position: absolute;`{:.language-css} für die ul-Elemente der zweiten Ebene
Wenn du deine br-Elemente nicht entfernen willst: viel Spass mit unvorhersagbaren Folgen.