Frage stellen
Ich habe in meiner Horizontalen Navigation teilweise eine dritte Ebene, die wenn man den entsprechenden Menüpunkt in der zweiten Ebene mit der Maus überfährt, rechts neben der 2. Ebene aufklappt.
Mein Problem liegt einmal in der Positionierung, denn ich habe mal lange Untermenüpunkt und mal kurze. Bei den Langen, da läuft eben dieser lange Name in die 2. Ebene hinein, es sei denn, ich Positioniere die dritte Ebene weit genug von der 2. Ebene weg.
Das hat aber den effekt, daß die dritten Ebenen, welche nur kurze Namen enthalten, mit einen erheblichen Abstand von der 2. Ebene aufklappen.
Ebenfalls sind die unterschiedlichen Längen ein Problem bei der Breite der dritten Ebene. Wenn ich 100% angebe, dann laufen die langen Namen in die 2. Ebene hinein, wenn ich 200 % angebe, dann verlieren sich die 3. Ebenen mit kurzen Namen in ihrer Ebene.
Kann man das irgendwie mit css regeln, daß die Breite der dritten Ebene sich an dem längsten Namen orientiert und daß die 3. Ebene immer direkt an der 2. Eben anschließ, anstatt zu weit von ihr weg erscheint, oder in sie hinein läuft?
Hier der css-Positionierungsteil:
- Code: Alles auswählen
#pNaviContainer ul ul
{
position: absolute;
padding:6px 0 0 0;
margin:0;
z-index: 500;
background-color:#ffffff;
}
#pNaviContainer ul ul li {
clear: both;
}
#pNaviContainer ul ul ul
{
position: absolute; top: 0; right: 100%; width: 200%;
padding:0;
margin:0;
z-index: 500;
background-color:#ffffff;
}
Der HTML-Code schaut so aus:
- Code: Alles auswählen
<div id="portalNaviContainer">
<div id="pNaviContainer">
<div id="pNaviContainer"><ul>
<li><a href="http://localhost/feuerwehr/index.php?page=index" target="_self">Gemeindefeuerwehr</a><ul>
<li><a href="http://localhost/feuerwehr/index.php?page=uebersicht" target="_self">Übersicht</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=wir-gf" target="_self">Wir über uns</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=ansprechpartner-gf" target="_self">Ansprechpartner</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=schiedsrichter" target="_self">Schiedsrichter</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=info" target="_self">Informationen</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=asstart" target="_self">Asendorf</a><ul>
<li><a href="http://localhost/feuerwehr/index.php?page=wir-as" target="_self">Wir über uns</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=ansprechpartner-as" target="_self">Ansprechpartner</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=einsaetze-as" target="_self">Einsätze</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=fahrzeuge-as" target="_self">Fahrzeuge</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=termine-as" target="_self">Termine</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=feuerwehrhaus-as" target="_self">Feuerwehrhaus</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=wettbewerbe" target="_self">Wettbewerbe</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=bvstart" target="_self">Bruchhausen-Vilsen</a><ul>
<li><a href="#" target="_self">Aktuell</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=uebersicht_1" target="_self">Einsätze</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=fahrzeuge-bv" target="_self">Fahrzeuge</a><ul>
<li><a href="http://localhost/feuerwehr/index.php?page=ruestwagen" target="_self">RW-1</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=tankloeschfahrzeug" target="_self">TLF 16/24</a></li>
<li><a href="#" target="_self">Alte Fahrzeuge</a></li>
<li><a href="#" target="_self">Löschzug</a></li>
</ul></li>
<li><a href="#" target="_self">Bildergalerie</a></li>
<li><a href="#" target="_self">Termine</a></li>
<li><a href="#" target="_self">Einsatzgebiet</a></li>
<li><a href="#" target="_self">Musikzug</a><ul>
<li><a href="#" target="_self">Willkommen</a></li>
<li><a href="#" target="_self">Aktuelles</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Nachwuchswerbung</a></li>
<li><a href="#" target="_self">Auftritte</a></li>
<li><a href="#" target="_self">Repertoire</a></li>
<li><a href="#" target="_self">Verschiedenes</a></li>
<li><a href="#" target="_self">Kontakt</a></li>
</ul></li>
<li><a href="#" target="_self">Verschiedenes</a></li>
<li><a href="#" target="_self">Mietglied werden</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=bv-internstart" target="_self">Intern</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=enstart" target="_self">Engeln</a><ul>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Aktuelles</a></li>
<li><a href="#" target="_self">Fahrzeuge</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=en-einsatz" target="_self">Einsätze</a></li>
<li><a href="#" target="_self">Termine</a></li>
<li><a href="#" target="_self">Veranstaltungen</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=hustart" target="_self">Hustedt</a><ul>
<li><a href="#" target="_self">Aktuell</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Fahrzeug</a></li>
<li><a href="#" target="_self">Termine</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=kbstart" target="_self">Kleinenborstel</a><ul>
<li><a href="#" target="_self">Infos / Einsätze</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Fahrzeug</a></li>
<li><a href="#" target="_self">Bildergalerie</a></li>
<li><a href="#" target="_self">Termine</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=mastart" target="_self">Martfeld</a><ul>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Informationen</a></li>
<li><a href="#" target="_self">Fahrzeuge</a></li>
<li><a href="#" target="_self">Termine</a></li>
<li><a href="#" target="_self">100 Jahre</a></li>
<li><a href="#" target="_self">Galerie</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=omstart" target="_self">Ochtmannien</a><ul>
<li><a href="#" target="_self">Aktuell</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Fahrzeug</a><ul>
<li><a href="#" target="_self">Altes Fahrzeug</a></li>
</ul></li>
<li><a href="#" target="_self">Termine</a></li>
<li><a href="#" target="_self">Ortsplan</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=swstart" target="_self">Schwarme</a><ul>
<li><a href="#" target="_self">Aktuell </a></li>
<li><a href="#" target="_self">Einsätze </a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Fahrzeuge</a></li>
<li><a href="#" target="_self">Bilder</a></li>
<li><a href="#" target="_self">Termine</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=sustart" target="_self">Süstedt</a><ul>
<li><a href="#" target="_self">Aktuell</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Fahrzeug</a></li>
<li><a href="#" target="_self">Termine</a></li>
<li><a href="#" target="_self">Verschiedenes</a><ul>
<li><a href="#" target="_self">Versammlungen</a></li>
<li><a href="#" target="_self">Einsätze</a></li>
<li><a href="#" target="_self">Übungen</a></li>
<li><a href="#" target="_self">Berichte</a></li>
</ul></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=uestart" target="_self">Uenzen</a><ul>
<li><a href="#" target="_self">Aktuell</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Ansprechpartner</a></li>
<li><a href="#" target="_self">Fahrzeug</a><ul>
<li><a href="#" target="_self">Altes Fahrzeug</a></li>
</ul></li>
<li><a href="#" target="_self">Termine</a></li>
<li><a href="#" target="_self">Veranstaltungen</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=mustart" target="_self">Musikzug</a><ul>
<li><a href="#" target="_self">Willkommen</a></li>
<li><a href="#" target="_self">Aktuelles</a></li>
<li><a href="#" target="_self">Wir über uns</a></li>
<li><a href="#" target="_self">Nachwuchswerbung</a></li>
<li><a href="#" target="_self">Auftritte</a></li>
<li><a href="#" target="_self">Repertoire</a></li>
<li><a href="#" target="_self">Verschiedenes</a></li>
<li><a href="#" target="_self">Kontakt</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=justart" target="_self">Jugendfeuerwehren</a><ul>
<li><a href="#" target="_self">Asendorf / Engeln</a></li>
<li><a href="#" target="_self">Bruchhausen-Vilsen</a></li>
<li><a href="#" target="_self">Schwarme</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=links" target="_self">Links</a></li>
<li><a href="http://localhost/feuerwehr/index.php?page=contact" target="_self">Kontakt</a><ul>
<li><a href="http://localhost/feuerwehr/index.php?page=guestbook" target="_self">Gästebuch</a></li>
</ul></li>
<li><a href="http://localhost/feuerwehr/index.php?page=search" target="_self">Suche</a><ul>
<li><a href="http://localhost/feuerwehr/index.php?page=sitemap" target="_self">Sitemap</a></li>
</ul></li>
</ul></div>
</div>
<div class="clearer"></div>
</div>
Herzlichen Dank schon mal für Eure Hilfe.
Gruß,
Adana