✔ Mit CSS jede <li> einzeln ansprechen

[babone]

Hallo,

ich möchte das in meiner menü die hintergrund farbe des jeweiligen Buttons auf der man gerade ist, anders angezeigt wird(schwieriger satz ;-)). Dafür gibt es die Pseudo klasse active aber die funktioniert bei Firefox nicht und durch das, das ich zwei menüs habe will Ich natürlich auch die zweite ansprechen können. Wie kann ich jede einzelne <li> ansprechen? Mit ID komme ich irgendwie nicht weiter oder muss ich javascript dafür verwenden hmm...
So sieht mein normaler Menü aus! Hoffe das mir jemand da helfen kann. danke

<div class="menu2">
<ul>
<li><a href="Book.html">&nbsp;Booking</a></li>
<li><a href="Bdesign.html">&nbsp;Design</a></li>
<li><a href="News.html">&nbsp;Newsletter</a></li>
</ul>
</div>

.menu2
{
 padding: 4px;
 margin: 4px;
 margin-top: 1px;
 width:250px;
 float: left;

}
.menu2 ul
{
  list-style: none;
  padding: 0px;
  margin: 0px;
  text-align: left;
}
.menu2 li
{
    font-size:8px;
	letter-spacing:0.4em;
	list-style: none;
	padding-top:4px;
	padding-left:0px;
	margin-left:0px;
	display: block;
	height:13px;
}
.menu2 a
{
display: block;
border-left: 7px solid #a1a1a1;
color: #ffffff;
font-weight:bold;
text-decoration: none;
width: 250px;
}
.menu2 a:hover
{
display: block;
text-decoration: none;
color: #fff;
font-weight:bold;
background-color: #fbaa19;
border-left: 7px solid #666666;
}

.

 

[Maik]

Es könnte für den Link der aktuell geöffneten Seite eine CSS-Klasse (in diesem Beispiel .active) oder ID mit den gewünschten CSS-Formatierungen bestimmt werden:

.menu2 a:link.active, .menu2 a:visited.active {
/* CSS-Formatierungen */
}

<!-- Book.html -->
<div class="menu2">
 <ul>
  <li><a class="active" href="Book.html">&nbsp;Booking</a></li>
  <li><a href="Bdesign.html">&nbsp;Design</a></li>
  <li><a href="News.html">&nbsp;Newsletter</a></li>
 </ul>
</div>

<!-- Bdesign.html -->
<div class="menu2">
 <ul>
  <li><a href="Book.html">&nbsp;Booking</a></li>
  <li><a class="active" href="Bdesign.html">&nbsp;Design</a></li>
  <li><a href="News.html">&nbsp;Newsletter</a></li>
 </ul>
</div>

<!-- News.html -->
<div class="menu2">
 <ul>
  <li><a href="Book.html">&nbsp;Booking</a></li>
  <li><a href="Bdesign.html">&nbsp;Design</a></li>
  <li><a class="active" href="News.html">&nbsp;Newsletter</a></li>
 </ul>
</div>

 

[Gumbo]

Zudem sind die geschützten Leerzeichen gar nicht mehr nötig; regle das einfach auch mit CSS, etwa:

.menu2 a {
	padding-left: 1ex;
}

 

[babone]

Danke vielmals! Es klappt wunderbar...
Danke Gumbo!
Also Maik würde bei einer Skala von 1 bis 10, 15 Punkte kriegen.

Total schnelle Antwort, präzise und genau auf'n Punkt

Danke
Naci