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:
Vermutlich ist die Lösung lächerlich einfach, aber ich komm gerade nicht drauf.
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:
[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]
/* 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.