Submenü bei Aktivität anzeigen

[Mausi89]

Hallo,

ich habe ein vertikales Menü dass beinhaltet in zwei Menüpunkten ein Submenü, dieses soll genau drunter eingeblendet werden, sodass die anderen Hauptmenüpunkte nach unten rutschen. Bei hover funktioniert, dass schon sehr gut, nur ich möchte, gerne auch dass wenn einer dieser Submenü punkte gerade aktiv ist, also man gerade auf einer dieser Submenü Seiten ist, das Submenü weiterhin angezeigt wird und erst wieder verschwindet, wenn man einen der anderen Hauptmenüpunkte anklick.

Hier mein CSS:

.main-navigation {
    position: absolute;
    left: 10px;
    z-index: 5;
}


.main-navigation ul{
    background: #153363;
    width: 180px;
    list-style:none;
    margin:0;
    padding:0;
}


.main-navigation ul li {
    position:relative;
}

.main-navigation a {
    color:#f9f9f9;
    padding:12px 0px;
    display:block;
    text-decoration:none;
    transition:1s;
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    font-family:Playfair Display;
    font-weight: bold;
    font-size:16px;
    padding-left:20px;
}


.main-navigation a:hover {
    background: RGBA(255,255,255,0.05);
    color:#fff;
    font-style: italic;
}


.main-navigation ul li:hover ul {   
    display:block;
}


.main-navigation ul li:focus ul {   
    display:block;
}


.main-navigation ul .sub-menu {   
    /*position:absolute;  */
    left:180px;
    top:0;
    border-top:1px solid #e9e9e9;
    display:none;
}


.main-navigation ul ul li {   
    width:170px;
    background:#DCE1E8;
    border:1px solid #D5D7DB;
    border-top:0;
}


.main-navigation ul ul li a {   
    color:#476EA8;
    font-size:15px;
}


.main-navigation ul ul li a:hover {   
    color:#153363;
    letter-spacing: 1px;
    background: #F0F4FA;
}

Kann mir bitte einer Helfen, hab schön alles, was ich Gefundenhabe versucht ohne erfolg.


Danke schon mal im Voraus.


Schöne Grüße
Mausi89

 

[Mausi89]

Kann mir den keiner dabei helfen?

 

[dn3d_fanboy]

Irgendwie verstehe ich nicht ganz, was du erreichen möchtest. Du hast ein Submenü und wenn du dort einen Menüpunkt anklickst und die neue Seite geladen wird, soll das Submenü noch offen sein, oder wie? Willst du das vielleicht nur bei der mobilen Ansicht so haben?

Eventuell mal den HTML und CSS - Code bei https://jsfiddle.net/ hochladen, dann könnte man deinen Code mal im Ganzen sehen.

 

[Mausi89]

Ja genau.

Meine Webseite läuft mit Wordpress.

Hier der Link zur Seite, wie es derzeitig ist.


Wenn ich z. B. auf Salz gehe und den Punkt Unterseite 2 anklicke, sollen trotzdem die Menüpunkte "Unterseite, Unterseite 2 und Unterseite 3 stehen bleiben und sich nicht einklappen. Gehe ich jetzt wieder auf die Seite Luft soll sich das Untermenü wieder einklappen und erst wieder erscheinen wenn ich drüber Hover.

 

[dn3d_fanboy]

Da müsstest du mit Javascript oder mit jQuery (toggle) arbeiten. Die Startseite müsstest du dann über die Klasse "home" von diesem Toggle ausschließen.