[Solucionado] Diferentes Imagenes Background Para Cada Elemento Del Blocktopmenu

[goodluck11]

Buenas, 

 

quiero modificar la foto de fondo que tiene mi blocktopmenu cuando se despliega, pero el problema es el siguiente,

Como veis en las fotos adjuntadas la foto de fondo es fija, este es su código (superfish-modified.css):

 

.sf-menu ul {

  position: absolute;

  top: -999em;

  background: url(../../../../img/menu-bg.png) 630px center no-repeat white;

}

 

Cómo puedo modificar el tag background segun la categoría que despliega?

 

La idea sería mostrar 4 imagenes diferentes para los 4 elementos del menú.

 

Saludos y gracias de antemano

 

Edited February 21, 2016 by goodluck11 (see edit history)

[Victor Castro Contreras]

Con ello haces una condicional por cada item de la lista del menu

.sf-menu > li:nth-child(1) > ul {
    background: red;
}

.sf-menu > li:nth-child(2) > ul {
    background: green;
}

[goodluck11]

Solución:

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: url(../../../../img/c_p.png) 280px center no-repeat white;
}
.sf-menu > li:nth-child(2) > ul {
background: url(../../../../img/c_a.png) 280px center no-repeat white;
}
.sf-menu > li:nth-child(3) > ul {
background: url(../../../../img/c_m.png) 280px center no-repeat white;
}
.sf-menu > li:nth-child(4) > ul {
background: url(../../../../img/c_i.png) 280px center no-repeat white;
}

Edited February 21, 2016 by goodluck11 (see edit history)

[goodluck11]

 

Con ello haces una condicional por cada item de la lista del menu

.sf-menu > li:nth-child(1) > ul {
    background: red;
}

.sf-menu > li:nth-child(2) > ul {
    background: green;
}

Genial, era lo que buscaba. Muchas gracias @VictorCastro!