Navigation li floaten, Unternavi soll auch floaten

Fanello · #1 (**permalink**) 23.07.2012, 10:29

Liebes xhtmlforum

Folgende Situation: Ich muss folgende horizontale Navigation erstellen:

Home | Produkte Unternavi1 | Aktuelles Unternavi2 | Über uns Unternavi3

Die Fettgedruckten Begriffe sind jeweils Navigationspunkte der ersten Ebene, diese haben jeweils 1 Unternavi-Punkt.

Das ganze baue ich mit ul/li auf. Für die erste Ebene natürlich kein Problem, li floaten und das wars (grob gesagt).
Die zweite Ebene ist dann jeweils in einem eigenen ul/li verpackt. Also so:

HTML-Code:

<ul class="navi1">
<li>Home</li>
<li>Produkte
  <ul class="navi2">
  <li>
  Unternavi1
  </li>
  </ul>
</li>
<li>Aktuelles
  <ul class="navi2">
  <li>
  Unternavi1
  </li>
  </ul>
</li>
<li>Über uns
  <ul class="navi2">
  <li>
  Unternavi1
  </li>
  </ul>
</li>
</ul>

Das heisst also, das ul der Unternavi soll das li des jeweiligen Hauptnavi-Punkt floaten. Geht das überhaupt?

Heiko Mamerow · #2 (**permalink**) 23.07.2012, 11:42

Hallo Fanello,

...ja, das geht. Und zwar ganz einfach - z.B. so:

Listamatic2: Pure CSS hover list

Schöne Grüße aus Berlin
Heiko

Fanello · #3 (**permalink**) 23.07.2012, 14:40

hi Heiko

Vielen Dank für den Link. Dieses Beispiel macht aber nicht unbedingt das, was ich gesucht habe. Im Beispiel erscheint beim Klick auf eine Hauptrubrik die Unterrubrik einfach darunter.

Bei mir ist aber die Navigation immer mit allen Unterrubriken sichtbar. Unterrubrik gibts immer nur 1, und diese soll jeweils neben dem jeweiligen Hauptrubrikpunkt stehen.

Habe jetzt vor allem mit dem float-Attribut ein wenig rumprobiert. Und ich glaube die Lösung gefunden zu haben:

HTML-Code:

/* 3.0 NAVIGATION */
ul.navi1 {
	margin:0;
	padding:0;
	float:left;
}
ul.navi1 li {
	list-style:none;
	float:left;
}
ul.navi1 a {
	display:block;
	font-size:20px;
	padding:0 22px 0 22px;
	color:#000000;
	margin:0;
	height:57px;
	float:left;
}
ul.navi1 a:hover, ul.navi1 a.current, ul.navi1 a.active	{
	text-decoration:underline;
}

/* 3.1 SUBNAVIGATION */
ul.navi2 {
	margin:0;
	padding:0;
	float:left;
}
ul.navi2 li {
	list-style:none;
}
ul.navi2 a {
	display:block;
	font-size:12px;
	padding:0 22px 0 22px;
	color:#000000;
	margin:0;
	height:57px;
}
ul.navi2 a:hover, ul.navi2 a.current, ul.navi2 a.active	{
	text-decoration:underline;
}

Mit diesem CSS funktioniert es. Entscheidend dabei: das float:left im a-Tag der Hauptnavi.

PS: hat einige interessante Beispiele in deinem Link. Sehr nützlich, danke!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Navigation ist nicht mittig	Schokokrapfen	CSS	29	19.09.2011 23:19
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29