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>
Und das meine CSS-Datei, wobei die IDs erhalten bleiben müssten, da diese ja vom CMS generiert werden:
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;
}
Und bitte nicht lachen, ich lerne noch
Vielen dank für eure Hilfe!
21.10.2006, 10:03
Probleme mit einem CSS-Menü (UL-Liste)!
Ähnliche Themen
Linear-Darstellung
