|
|||
Probleme mit einem CSS-Menü (UL-Liste)!
Hallo zusammen,
ich kämpfe seit drei Tagen mit einem CSS-Menü und bekomme es nicht hin. Ich bin noch nicht ganz firm mit CSS, arbeite aber dran. Vielleicht kann mir hierbei jemand helfen. Ich habe eine UL-Liste, die das CMS erstellt. Die erste Ebene soll horizontal dargestellt werden und bei einem RollOver sollen die zweite UND dritte Ebene auftauchen. Und das möglichst untereinander. Siehe Skizze unter Unbenanntes Dokument. Ich bekomme das nicht hin, entweder die zweite und dritte Ebene stehen ineinander (überlappend) oder nebeneinander (versetzt). Aber das sie in einer Reihe stehen, klappt nicht. Das ist mein HTML-Code: Code:
<div id="vpnavigation"> <ul id="nav" style="float:left;"> <li> <a href="front_content.php?idcat=18">erste Ebene 1 </a> </li> <li> <a class="daddy" href="front_content.php?idcat=19">erste Ebene 2 </a> <ul> <li> <a class="daddy" href="front_content.php?idcat=50">zweite Ebene 1 </a> <ul> <li> <a href="front_content.php?idcat=49">dritte Ebene 1 </a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=32"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 3 </a><a href="front_content.php?idcat=33"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 4 </a><a href="front_content.php?idcat=34"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 5 </a><a href="front_content.php?idcat=35"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 6 </a><a href="front_content.php?idcat=36"></a> </li> </ul> </li> <li> <a class="daddy" href="front_content.php?idcat=37">zweite Ebene 2 </a> <ul> <li> <a href="front_content.php?idcat=49">dritte Ebene 1</a><a href="front_content.php?idcat=38"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=39"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 3 </a><a href="front_content.php?idcat=40"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 4 </a><a href="front_content.php?idcat=41"></a> </li> </ul> </li> <li> <a class="daddy" href="front_content.php?idcat=42">zweite Ebene 3 </a> <ul> <li> <a href="front_content.php?idcat=49">dritte Ebene 1 </a><a href="front_content.php?idcat=43"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=44"></a> </li> </ul> </li> <li> <a class="daddy" href="front_content.php?idcat=45">zweite Ebene 4 </a> <ul> <li> <a href="front_content.php?idcat=49">dritte Ebene 1</a><a href="front_content.php?idcat=46"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=47"></a> </li> <li> <a href="front_content.php?idcat=49">dritte Ebene 3 </a><a href="front_content.php?idcat=48"></a> </li> </ul> </li> </ul> </li> <li> <a class="daddy" href="front_content.php?idcat=20">erste Ebene 3 </a> <ul> <li> <a href="front_content.php?idcat=24">zweite Ebene 1 </a> </li> <li><a href="front_content.php?idcat=24">zweite Ebene 2 </a></li> <li><a href="front_content.php?idcat=24">zweite Ebene 3 </a></li> <li><a href="front_content.php?idcat=24">zweite Ebene 4 </a></li> <li><a href="front_content.php?idcat=24">zweite Ebene 5 </a></li> <li><a href="front_content.php?idcat=24">zweite Ebene 6 </a></li> <li><a href="front_content.php?idcat=24">zweite Ebene 7 </a></li> </ul> </li> <li> <a href="front_content.php?idcat=21">erste Ebene 4 </a> </li> <li> <a href="front_content.php?idcat=22">erste Ebene 5 </a> </li> </ul> </div> Code:
#nav li { float:left; } #vpnavigation, #vpnavigation ul { /* alle Listen */ padding: 0; margin: 0; list-style: none; line-height: 1; } #vpnavigation a { display: block; margin-top: 9px; margin-bottom: 5px; text-decoration: none; } #vpnavigation li { /* alle Listenelemente */ padding-right: 19px; } #vpnavigation li ul { /* Listen 2. Ebene */ padding-left: 5px; position: absolute; background: orange; width: auto; left: -999em; /* durch "left" au�erhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */ } #vpnavigation li ul li { /* Listen 2. Ebene */ clear: both; } #vpnavigation li li a.daddy { /* Listenelemente mit Unterpunkten */ background: url(../images/rightarrow.gif) center right no-repeat; } #vpnavigation li ul ul { /* Listen 3. Ebene und weiter */ margin: -1em 0 0 10em; width: 170px; } #vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul { left: -999em; } #vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Men�punkte liegen */ left: auto; } #vpnavigation li.activepath { /* Listenelemente, die im aktiven Pfad liegen */ font-style: italic!important; } #vpnavigation li#active { /* Listen zur aktuellen Kategorie */ font-style: italic!important; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Liste per CSS einrücken | Flubber | CSS | 2 | 08.02.2011 15:33 |
CSS Menü auf Internet Explorer abstimmen | raphi156 | CSS | 33 | 22.12.2010 10:10 |
css menü, brauche dringend hilfe | BlackRavn | CSS | 9 | 09.10.2010 10:06 |
CSS Menü zickt rum /IE6/IE7/FF | GizmotroniX | CSS | 3 | 11.07.2007 08:14 |
Verschachtelte Liste für Nav Menue | klaus | CSS | 6 | 19.06.2007 10:10 |