Hola, estoy tratando de hacer un menú vertical que tenga de fondo imágenes, una en la parte superior donde empieza el bloque del menu, otra para las zonas centrales y otra donde acaba el menu. Me gustaría que me comentarais la manera correcta de hacerlo. Yo hasta ahora he hecho lo siguiente pero no se si es lo más apropiado. Además, no consigo separar el texto de las opciones del menu del borde izquierdo ya que si le doy un padding-left a .opciones-menu, tambien desplazo la imagen de fondo.
Código:
#menu{
font-family:Arial, Helvetica, sans-serif;
width:143px;
background-color:#999999;
}
h2{
font-size:14px;
background-image:url(images/menu-cabecera.gif);
background-position:top;
background-repeat:no-repeat;
padding: 0px 0px 0px 10px;
height:25px;
margin:0px;
}
.lista-menu{
padding:0px;
margin:0px;
list-style-type:none;
}
.opciones-menu{
width: 100%;
background-image:url(images/menu-medio.gif);
background-repeat:no-repeat;
height:20px; /*altura de la imagen*/
margin:0;
font-size:12px;
padding: 0px 0px 0px 0px;
}
.opciones-menu-bajo{
width: 100%;
background-image:url(images/menu-bajo.gif);
background-repeat:no-repeat;
height:20px;
margin:0;
font-size:12px;
padding: 0px 0px 0px 0px;
}
<div id="menu">
<h2>Lecciones</h2>
<ul class="lista-menu">
<li class="opciones-menu">Leccion 1></li>
<li class="opciones-menu">Leccion 2</li>
<li class="opciones-menu-bajo">Leccion 3</li>
</ul>
</div>
Saludos y muchas gracias