Foros del Web » Creando para Internet » HTML »

menu cada item diferente imagen

Estas en el tema de menu cada item diferente imagen en el foro de HTML en Foros del Web. Buenas, yo soy un tira piedra con HTML, osea que no conozco nada de HTML, pero como hago para hacer un menu con sub-menu asi, ...
  #1 (permalink)  
Antiguo 25/07/2010, 10:39
 
Fecha de Ingreso: mayo-2008
Mensajes: 353
Antigüedad: 15 años, 10 meses
Puntos: 3
Pregunta menu cada item diferente imagen

Buenas, yo soy un tira piedra con HTML, osea que no conozco nada de HTML, pero como hago para hacer un menu con sub-menu asi, esto es un ejemplo

<ul>
<li><a href="#">Mantenimiento</a></li> background: url(image/boton1.png)
<ul>
<li><a href="#">Mantenimiento 1</a></li>
<li><a href="#">Mantenimiento 2</a></li>
</ul>
<li><a href="#">Seguros</a></li> background: url(image/boton2.png)
<li><a href="#">Control</a></li> background: url(image/boton3.png)

</ul>

peroooo que cada item tenga una imagen diferente, osea como un background como imagen
Gracias
  #2 (permalink)  
Antiguo 25/07/2010, 14:05
 
Fecha de Ingreso: mayo-2008
Mensajes: 353
Antigüedad: 15 años, 10 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

Etiquetas: diferente, item
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:34.