background diverso per ogni voce menu

[blur]

ciao,

ho questo menu:

ul.menu {
  width:100%;
  list-style:none;
  margin:0; padding:0;

}


ul.menu li a {
  display:block;
  text-decoration:none;
  padding:10px;
  height:1em;line-height:1em;
  background:#EEE
}

ul.menu li { display:inline }

ul.menu li a:link, ul.menu li a:visited {
  background:#EEE;
  color: #000;
  border-top:1px solid #fff;
  border-bottom:1px solid #ccc
}

ul.menu li a:hover, ul.menu li a:active {
  background: #fff;
  color:#5A7DA8;
}

poi lo visualizzo con

<ul class="menu">[*]menu1[*]menu2[/list]

ma se volessi applicare un colore di sfondo diverso per ogni voce di menu?
:master:

[TheBestNeo]

Credo tu debba creare una classe diversa per ogni colore di menu che vuoi:
es:
.menugiallo
{
background:"yellow"
}
.menurosso
{
background:"red"
}


e poi applicarle alle voci di menu nell'html...

[blur]

.menugiallo {background:#F8D908}

[*]menu

non funziona, neanche se applico la classe al[*]

[TheBestNeo]

Creare dei div con lo sfondo di un colore e metterli in lista?
[*]<div id="sfondogiallo">vocedelmenu</div>

così nemmeno? Magari dandoci delle dimensioni al div.

[blur]

no, il colore di sfondo viene applicato al tag <a href....> e sull'effetto hover

ul.menu1 li a:hover, ul.menu1 li a:active {
background: #fff;
color:#5A7DA8;
}

dovrei fare in modo di toglierlo da lì e farlo funzionare con una classe personalizzata per ogni tag <a>