Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/07/2010, 14:05
chuchufuentes
 
Fecha de Ingreso: mayo-2008
Mensajes: 353
Antigüedad: 15 años, 11 meses
Puntos: 3
Respuesta: menu cada item diferente imagen

Bueno, nadie dice nada aqui va la repuesta

pagina.html

<div id="menu" style="height: 82%">
<ul class="menu">
<li class="seguros"><a href="#">Seguros</a></li>
<li class="mantenimiento"><a href="#" class="mantenimiento">Mantenimiento</a>
<ul>
<li><a href="http://www.google.com">Mantenimiento1</a></li>
<li><a href="#">Mantenimiento2</a></li>
<li><a href="#">Mantenimiento3</a></li>
</ul>
</li>
<li class="control"><a href="#">Control</a></li>
<li class="siniestro"><a href="#">Siniestro</a></li>
<li class="partes"><a href="#">Partes</a></li>
<li class="autos"><a href="#">Autos</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</div>


talcosa.css


/**************************************************/
/* Body and Wrapper */
/**************************************************/

body {
background: #79AEFF url(image/back.png) top center repeat-x fixed;
margin: 0;
padding: 0;

}

#wrapper {
margin: 0 auto;
width: 800px;
padding: 0;
text-align: left;
height: 100%;
}

/**************************************************/
/* Top Piece */
/**************************************************/

#top {
background: url(image/bgtop.png) top center no-repeat;
width: 800px;
height: 78px;
}

/**************************************************/
/* Content
another wrapper that holds all the content */
/**************************************************/

#content {
background: url(image/bgmiddle.png) center repeat-y;
width: 760px;
height: 100%;
padding: 0px 20px 150px 20px;
}

/**************************************************/
/* All the content */
/**************************************************/

#header {
background: url(image/mapa.jpg) top center no-repeat;
width: 760px;
height: 230px;
margin: 0px 10px 10px 0px;
}
/* Menu */
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 2px;
position: relative;
}

.menu {
width: 200px;
height: 100%;
margin: 0px;
float: left;
text-align: left;
}

.menu li a {
height: 35px;
voice-family: "\"}\"";
voice-family: inherit;
height: 27px;
text-decoration: none;
text-align: left;
}
.menu li a:link, #menu li a:visited {
color: white;
display: block;
height: 36px;
text-align: center;
background-repeat: no-repeat;
}


.partes {background: url(image/boton2.png) no-repeat; }
.partes a {background-image: url(image/boton2.png);}
.mantenimiento {background: url(image/boton1.png) no-repeat; }
.mantenimiento a {background-image: url(image/boton1.png);}
.seguros {background: url(image/boton3.png) no-repeat; }
.seguros a {background-image: url(image/boton3.png);}
.siniestro {background: url(image/boton4.png) no-repeat; }
.siniestro a {background-image: url(image/boton4.png);}
.control {background: url(image/boton6.png) no-repeat; }
.control a {background-image: url(image/boton6.png);}
.autos {background: url(image/boton6.png) no-repeat; }
.autos a {background-image: url(image/boton6.png);}

#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 320px;top:359px!important;top: -31px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

#stuff {
width: 525px;
margin: 0px 0px 0px 210px;
font-size:larger;
color:Black;

}

img {
border: none;
}

/**************************************************/
/* Bottom */
/**************************************************/

#bottom {
background: url(image/bgbottom.png) bottom center no-repeat;
width: 800px;
height: 100px;
text-align: center;
}

Para alguien que lo necesite