Problem mit Klasse 'current-menu-item' bei WP-Dropdownmenu

[Anaklysmos]

Guten Abend,

ich bin gerade dabei ein Dropdown-Menu zu gestalten. Das Menu wird von Wordpress mittels wp_nav_menu() erzeugt/eingebunden. Die Vergabe von Klassen und ID's funktioniert auch soweit.

Probleme habe ich nun mit den Klassen 'current-menu-item' und 'current-menu-parent' bei der Gestaltung der Untermenus. Bekommt nun ein Hauptmenupunkt die Klasse 'current-menu-item' zugewiesen, wird auch der Style der Untermenupunkte überschrieben.

Wenn ich mir die Styles via Opera Dragonfly anschaue bekomme ich diese Style-Hierarchie:

Die oberen Styles überschreiben diejenigen, die unter ihnen sind. Auf dem Bild sind nur die obersten Styles abgebildet, da ich nicht mehr auf einmal darstellen konnte und diese meiner Meinung nach auch eher unwichtig für das Problem sind. Wenn diese doch wichtig sein sollten kann ich sie nachreichen.

Hier ist noch der Ausschnitt der CSS-Datei, der für das Menu zuständig ist

/* The Container wrapping ul.main_navi */
#navwrap{
	width:1020px;
	margin:0 auto;
}

ul.main_navi{
	list-style:n;
	position:relative;
	z-index:499;
}

/* Menupunkte nebeinander ausrichten */
ul.main_navi li{
	float:left;
}
/*Menupunkte designen */
ul.main_navi li a{
	text-decoration:none;
	width:90px;
	color:#efe7be;
	padding:77px 0 3px 0;
	background:url(../img/eule_menu.png) top no-repeat;
	display:block;
	font-size:20px;
	text-align:center;
}
/* Menupunkte-hover designen */
ul.main_navi li a:hover{
	background:url(../img/eule_menu_hover.png top no-repeat);
	color:#d97925;
}
/* Menupunkt Home desigenen */
ul.main_navi li.startseite a{
	width:288px;
	height:100px;
	background:url(../img/Logo2.png) top left no-repeat;
	margin: 0;
	text-align:right;
	padding:65px 2px 3px 0;
}
/* Menupunkt Home hover designen */
ul.main_navi li.startseite a:hover{
	background:url(../img/Logo2_hover.png) top left no-repeat;
}
/* Menupunkt der aktuellen Seite designen */
ul.main_navi li.current-menu-item a,
ul.main_navi li.current-menu-parent a{
	color:#efe7be;
	background:url(../img/eule_menu_aktiv.png) top no-repeat;
}
/* Menupunkt der aktuellen Seite bei hover designen */
ul.main_navi li.current-menu-item a:hover,
ul.main_navi li.current-menu-parent a:hover{
	background:url(../img/eule_menu_aktiv.png) top no-repeat;
	color:#d97925;
}
/* Menupunkt Home als aktuelle Seite designen */
ul.main_navi li.startseite.current-menu-item a{
	background:url(../img/Logo2.png) top left no-repeat;
}
/* Menupunkt Home als aktuelle Seite bei hover designen */
ul.main_navi li.startseite.current-menu-item a:hover{
	background:url(../img/Logo2_hover.png) top left no-repeat;
}


/* Untermenu verstecken */
ul.main_navi li ul{display:none;}

/* Untermenu sichtbarmachen bei Maus über Menupunkt */
ul.main_navi li:hover ul{
	display:block;
	position:absolute;
	z-index:500;
}
/* Menupunkt erhält hover-Efekt wenn Unterpunkt auch hover hat */
ul.main_navi li:hover > a {
	background:url(../img/eule_menu_hover.png) top no-repeat;
	color:#d97925;
}/* Menupunkt der aktuellen Seite erhält hover-Efekt wenn Unterpunkt auch hover hat */
ul.main_navi li.current-menu-item:hover > a,
ul.main_navi li.current-menu-parent:hover > a {
	background: url(../img/eule_menu_aktiv.png) top no-repeat;
	color:#d97925;
}
/* Untermenupunkte untereinander platzieren */
ul.main_navi li ul li{
	float: none;
	position:relative;
}
/* Untermenupunkte desigenen */
ul.main_navi li ul li a,
ul.main_navi li.current-menu-item ul li a{
	background:#1b4f4b;
	padding: 5px;
	height:27px;
	width:200px;
	text-align:left;
}
/*Untermenupunte-hover designen */
ul.main_navi li ul li a:hover,
ul.main_navi li.current-menu-item ul li a:hover{
	background:#80a1f1e;
}
/* Untermenu 2.Ebene verstecken */
ul.main_navi li:hover ul ul{display:none;}

/* Untermenu 2.Ebene sichtbar machen */
ul.main_navi ul li:hover ul{
	display:block;
	position:absolute;
	top:0;
	left:100%;
}
/* Untermenupunkt erhält hover, wenn Untermenu 2. Ebene angesprochen wird */
ul.main_navi ul li:hover > a{
	background:#0a1f1e;
}

Ich habe schon versucht das Problem selber zu lösen, weiß aber nicht, wo ich etwas übersehe und bin deshalb für jede Hilfe dankbar.

 

[cythux]

AW: Problem mit Klasse 'current-menu-item' bei WP-Dropdownmenu

kannst du Wordpress irgendwo zu Demo zwecke und dein Theme installieren,
so das man es sich live anschauen kann

 

[rodemund]

AW: Problem mit Klasse 'current-menu-item' bei WP-Dropdownmenu

Bekommt nun ein Hauptmenupunkt die Klasse 'current-menu-page' zugewiesen, wird auch der Style der Untermenupunkte überschrieben.

"current-menu-page" kommt – wenn ich richtig aufgepasst habe – in deinem CSS-Ausschnitt gar nicht vor. Also wissen wir auch nicht, wo es steht und was es überschreibt.

 

[Anaklysmos]

AW: Problem mit Klasse 'current-menu-item' bei WP-Dropdownmenu

Leider habe ich keinen Webspace, auf dem ich Wordpress testweise installieren könnte. Alternativ könnte ich das Theme zum download anbieten.

"current-menu-page" kommt – wenn ich richtig aufgepasst habe – in deinem CSS-Ausschnitt gar nicht vor. Also wissen wir auch nicht, wo es steht und was es überschreibt.

Habe das gerade verbessert, das muss 'current-menu-item' heißen.

 

[Basark]

AW: Problem mit Klasse 'current-menu-item' bei WP-Dropdownmenu

Für die Zuweisung in der Hauptmenü-Ebene musst Du Child-Selektoren benutzen: siehe http://css-tricks.com/child-and-sibling-selectors/