css sprite menu vertical

[Ruben_JD]

Tu menu tiene la siguiente estructura:

Código HTML:

<ul id="menu">
  <li><a href="#">opcion 1</a></li>
  <li><a href="#">opcion 2</a></li>
  <li><a href="#">opcion 3</a></li>
</ul>
 

el codigo css:

Código CSS:

ul#menu{
  widht: 150px;/* ancho*/
}
ul#menu li{
  float:left;
  display:block;/* inline es horizontal*/
  padding:0;
  margin:0;
}
ul#menu li a{
  display:block;
  text-decoration: none;
}
ul#menu li a:hover{
  display:block;
  text-decoration: underline;
}
 

ahora solo tienes que añadir el codigo a cada boton con su respectiva posicion para el sprite.

Código HTML:

<ul id="menu">
  <li><a href="#" class="op1">opcion 1</a></li>
  <li><a href="#" class="op2">opcion 2</a></li>
  <li><a href="#" class="op3">opcion 3</a></li>
</ul>
 

Código CSS:

ul#menu{
  widht: 150px;/* ancho*/
}
ul#menu li{
  float:left;
  display:block;/* inline es horizontal*/
  padding:0;
  margin:0;
}
ul#menu li a{
  display:block;
  text-decoration: none;
background-image: (tuimagen);
}
ul#menu li a.op1{
width: px; /*ancho de la imagen*/
background-position: 0 0; /*posicion x & y*/
}
ul#menu li a.op1:hover{
  display:block;
  text-decoration: underline;
}
ul#menu li a.op2{
...
cuantas opcines tengas
 

pruebalo, suerte.