Hallo,

ich habe ein Navigations-Menü mit Hilfe des <ul>-Tags gestaltet, und dabei Verschachtelungen benutzt:

<ul id="menu">  
  <li>  
    Pflanzen  
    <ul id="pflanzen">  
      <li>für den Garten</li>  
      <li>für Beet & Balkon</li>  
      <li>usw.</li>  
    </ul>  
  </li>  
  <li>  
    Zubehör  
    <ul id="zubehoer">  
      <li>Pflanzgefäße</li>  
      <li>usw.</li>  
    </ul>  
  </li>  
</ul>

Jetzt wollte ich eigene Aufzählungszeichen für die Menüpunkte der obersten Ebene verwenden (also für "Pflanzen", "Zubehör").

#menu {  
	margin:0 auto;  
	margin-right:12px;  
	padding:0;  
	width:auto;  
	height:100%;  
	float:left;  
	list-style-image:url(resources/gfx/menu_list.jpg);  
}  
  
#menu #pflanzen, #menu #zubehoer, #menu #ueberuns {  
	list-style:none;  
}

Im Firefox klappts, im IE 8, Safari, Opera ebenfalls. Die IE7 und IE6 (ebenso der IE8 im "Kompatibilitätsmodus", der wohl mit dem IE7 weitgehend übereinstimmt) machen jedoch folgendes: Nicht die Punkte "Pflanzen" und "Zubehör" haben das Aufzählungszeichen, sondern deren jeweilige Unterpunkte.

Die Seite ist hier gespeichert: Testseite

Kann mir jemand verraten, wie ich das umgehen könnte? Wenn es semantisch noch was zu verbessern gibt, freu ich mich natürlich auch über Hinweise ;)

Grüße
Sven