CSS/Wordpress Dropdownmenü bei Klick offen lassen

[TheOnly1]

Moin zusammen.

Irgendwie stehe ich gerade wie der Ochs vorm Berg.
Ich habe das aktuelle Wordpress-Standardtheme Twenty Fourteen ein wenig angepasst, unter anderem so, dass das obere Dropdownmenü sich nicht vertikal, sondern horizontal "ausfährt".
Allerdings passiert das nur beim Mouseover. Das nervt mich.

Ich möchte (zusätzlich) noch, dass die Unterpunkte offen/sichtbar bleiben, wenn man den jeweiligen Primär-Punkt anklickt, oder man sich auf einer zum Menüpunkt zugehörigen Seite befindet.

Eigentlich sollte das doch mit focus gehen, oder?
Aber irgendwie hat das keinen Effekt.

Im Moment sieht das Ganze so aus:

Spoiler

[src=css]
/* Primary Navigation */


.primary-navigation {
float: left;
font-size: 11px;
margin: 0 1px 0 -12px;
padding: 0;
text-transform: uppercase;
}

.primary-navigation .menu-toggle {
display: none;
padding: 0;
}

.primary-navigation .nav-menu {
border-bottom: 0;
display: block;
}

.primary-navigation.toggled-on {
border-bottom: 0;
margin: 0;
padding: 0;
}

.primary-navigation li {
border: 0;
display: inline-block;
height: 48px;
line-height: 48px;
float:left;
}

.primary-navigation a {
display: inline-block;
padding: 0 12px;
white-space: nowrap;
}

.primary-navigation ul ul {
background-color: #24890d;
float: left;
margin: 0;
position: absolute;
top: 48px;
left: -999em;
z-index: 99999;
}

.primary-navigation li li {
border: 0;
display: block;
height: auto;
line-height: 1.0909090909;
}

.primary-navigation ul ul ul {
left: -999em;
top: 0;
}

.primary-navigation ul ul a {
padding: 18px 12px;
white-space: normal;
width: 100%;
}


.primary-navigation li.focus > a {
background-color: #24890d;
color: #fff;
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus > a {
background-color: #41a62a;
}


.primary-navigation ul li:hover > ul,
.primary-navigation ul li.focus > ul {
left: auto;
}

.primary-navigation ul ul li:hover > ul,
.primary-navigation ul ul li.focus > ul {
left: 100%;
}

.primary-navigation .menu-item-has-children > a,
.primary-navigation .page_item_has_children > a {
padding-right: 26px;
}

.primary-navigation .menu-item-has-children > a:after,
.primary-navigation .page_item_has_children > a:after {
-webkit-font-smoothing: antialiased;
content: "\f502";
display: inline-block;
font: normal 8px/1 Genericons;
position: absolute;
right: 12px;
top: 22px;
vertical-align: text-bottom;
}

.primary-navigation li .menu-item-has-children > a,
.primary-navigation li .page_item_has_children > a {
padding-right: 20px;
width: 168px;
}

.primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
.primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
.primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
.primary-navigation .page_item_has_children li.page_item_has_children > a:after {
content: "\f501";
right: 8px;
top: 20px;
}
}
[/src]

Vermutlich ist die Lösung lächerlich einfach, aber ich komm gerade nicht drauf.

 

[_GirAffe_]

Hi,
soweit ich das sehe geht das nicht mit CSS. Das müsstest du dann eher mit Javascript oder Jquery machen. Die CSS-Anweisung mit focus gillt leider nur dann, wenn du mit der Maus über dem Element bist. Sobald das nicht mehr der Fall ist, greift die Regel nicht mehr und das Menü wird dementsprechend wieder eingeklappt.
Aber ohne eine Beispielseite, auf der man sieht was du alles angepasst hast, kann ich schwer sagen ob ich dich richtig verstehe .

 

[dexter]

Das geht nicht nur nicht mit CSS (Zumindest nicht ohne arg üble Verrenkungen) Du wirst wahrscheinlich auch nicht drumrumkommen die Templates anzupassen.