Horizontale Navigation a la Suckerfish mit CSS - weitere Ebene bei mouse-over einble

**StummerWinter** · 13.12.2010, 12:22

Hallo Zusammen, ich hab ein totales Brett vorm Kopf und finde einfach nicht die Richtige Variante.

Ich hab laut diesem Tutorial erfolgreich meine Navigation gebastelt. Jetzt habe ich eine Menüebene mehr als im Tutorial, die ich gerne auch erst beim Mouse-Over eingeblendet haben möchte (im Moment wird diese Ebene automatisch eingeblendet, sobald man mouse over auf das übergeordnete Menü macht.) Die Lösung ist vermutlich äußert simpel, aber ich bekomme es einfach nicht hin.

Link zu Seite im Menü Aktivitäten ->Field Trip 2010 ->Informationen und die darunter liegende Ebenen.

hier zur Illustration ein Screenshot:

wie man sieht sind die Untermenü für "Touristisches" und Hamburg defaultmäßig ausgeklappt, wenn man auf Informationen, es sollte aber erst beim mouse-over ausgeklappt werden...

Laut Tutorial klappen die folgende Defintion die dritte Ebenne ein

Code:

.mod_navigation ul ul li:hover ul
{  display:block;
}

und die Defintion klappt die dritte Ebene aus:

Code:

.mod_navigation ul li:hover ul ul
{display:none; 
}

wie müsste ich diese beiden Definition für eine vierte Ebene ändern?

Vielen Dank im voraus für Lösungs- und Denkansätze....ich bin ziemlich verzweifelt...

**StummerWinter** · 04.01.2011, 13:52

Ich bin jetzt in einem html Dokument soweit gekommen, dass alles Unterhalb der Ebene "INFORMATION" nicht angezeigt wird. So weit so gut

Aber wie bekomme ich die Unterbene HAMBURG (Ohne dessen Unterebene HAMBURGER PHILES) bspw. beim Mouse over auf INFORMATION eingeblendet?
Zwischen all ul. ul ul und ul ul ul li seh ich gar nicht mehr durch:

hier meine CSS Definitionen soweit:

Code:

.mod_navigation
{
    position:absolute;
    overflow:visible;
    z-index:999;
}

.mod_navigation p
{
    margin:0px;
    padding:0px;
}

.mod_navigation ul
{
    margin:0px;
    padding:0px;
    list-style-type:none;
    }
.mod_navigation li
{
    width:160px; /* Breite eines Menüpunktes festlegen */
    position:relative; /* Position */
    float:left; /* links nebeneiander anordnen */
    background-color:#999999; /* eine Hintergrundfarbe */
    border-right:1px solid #ffffff; /* optischer Rahmen */
    border-bottom:1px solid #ffffff; /* optischer Rahmen */
    border-left:1px solid #ffffff; /* optischer Rahmen */
    line-height:35px; /* bestimmt die Höhe eines Menüeintrages */
}

.mod_navigation li ul
{
    left:-1px;
    top:36px; /* zweite Ebene beginnt 1 Pixel unter der ersten Ebene */
    position:absolute; /* Position wird absolut zum Elternelement gesetzt */
    display:none; /* Für erste Formatierung sichtbar. Wir später auf none gesetzt */

}
.mod_navigation li ul ul
{
    left:161px;
        top:0px;
    position:absolute;
}
.mod_navigation li ul
 {
     bottom:0px;
     left:-1px;
     right:0px;
     top:36px;
     position:absolute;
     display:none; /* Ausbleden der Untermenüs */

 }

 .mod_navigation ul li:hover ul,
 .mod_navigation ul li.sfhover ul
 {
     display:block;
 }

.mod_navigation ul li:hover ul ul,
.mod_navigation ul li.sfhover ul ul
{
    display:none;
}

.mod_navigation ul ul li:hover ul,
.mod_navigation ul ul li.sfhover ul
{
    display:block;
}

.mod_navigation ul ul li:hover ul ul,
.mod_navigation ul ul li.sfhover ul ul
{
    display:none;
}

**about:blank** · 06.01.2011, 10:20

versuch's mal damit. js mit css fallback.
http://users.tpg.com.au/j_birch/plugins/superfish/

**StummerWinter** · 06.04.2011, 12:16

Danke für die Antwort. Da mir das mit den vielen Untermenüs nun eh zu unübersichtlich wurden hab ich es alle Untermenüs nach der dritten Ebene ausgeblendet und lasse die Unterseiten via Artikelteaser anzeigen. Finde es so übersichtlicher