Problem mit <li>-Styling

[Cray]

Hi,

ich habe mal eine Frage zu einem Problem.

Folgenden Code habe ich, denn ich nicht verändern kann.

<ul id="submenu-pages">
	<li class="page_item page-item-6 current_page_item "><a href="#" title="Seite">Seite</a>
		<ul>
			<li class="page_item page-item-8"><a href="#" title="Noch eine Seite">Noch eine Seite</a></li>
			<li class="page_item page-item-7"><a href="#" title="Unterseite">Unterseite</a>
				<ul>
					<li class="page_item page-item-24"><a href="#" title="Ebene 3">Ebene 3</a>
						<ul>
							<li class="page_item page-item-25"><a href="#" title="Ebene 4">Ebene 4</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Meine Frage ist nun, wie ich das erste <li> mit der class current_page_item mit einem Hintergrund versehen kann, ohne die <li>'s darunter ebenfalls mit einem Hintergrund zu versehen. Momentan nutze ich folgenden CSS-Code dafür (geht so aber nicht).

#submenu-pages .current_page_item {
    background: #53BF17;
  }

  #submenu-pages .current_page_item strong,
  #submenu-pages .current_page_item a,
  #submenu-pages .current_page_item a:focus,
  #submenu-pages .current_page_item a:hover,
  #submenu-pages .current_page_item a:active {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
  }

Hat jemand eine Idee? So dass auch die anderen <li> in den Ebenen darunter funktionieren?

Wäre sehr dankbar für Tips :-)

[th2409]

So einfach wird das nach meinem Verständnis nicht sein.
Man kann zwar gezielt auf Elemente Einfluss nehmen, die auf der "ersten Ebene" unter einem anderen Element sind (beispielsweise mit #submenu_pages > ul), aber das ist in Deinem Falle nicht ausreichend. Die ganzen "untergeordneten" <li> sind ja mit Bestandteil des <li> der ersten Ebene, also in diesem enthalten. Also wird vielleicht nur übrig bleiben, die untergeordneten mit einem weißen(?) Hintergrund zu versehen und diejenigen der ersten Ebene mit dem geplanten Hintergrundmuster zu belassen.

[steffenk]

das ul ist auch in dem li, also muss das wieder raus

#submenu-pages li.current_page_item {
background: #53BF17;
}
#submenu-pages li.current_page_item ul li {
background: #fff;
}