28/05/2012, 04:25
|
| | | Fecha de Ingreso: febrero-2011 Ubicación: Entre Navarra y La Rioja
Mensajes: 41
Antigüedad: 13 años, 2 meses Puntos: 0 | |
| Respuesta: Menu desplegable con CSS
HTML Cita: <body>
<nav id="menu">
<ul>
<li class="default"><a href="#">Inicio</a></li>
<li><a href="#">Municipalidad</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">Servicios</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="http://rosmel-aguilar.blogspot.com/">Contacto</a></li>
</ul>
</nav>
</body>
CSS Cita: #menu {
height:30px;
border-radius:5px;
}
#menu ul{
padding-left:450px;
list-style:none;
margin: 0px auto;
}
#menu ul li{
display:inline-block;
font-family:arial;
font-size:13px;
font-weight:bold;
}
#menu ul li:hover{
background:#0979cf;
text-shadow: 0px 0px 3px #000;
}
#menu ul li a{
display:block;
padding:7px 5px;
width:90px;
color:#fff;
text-align:center;
}
#menu a{text-decoration:none}
#menu ul li ul{
position:absolute;
display:none;
width:130px;
border-radius:0px 0px 5px 5px;
padding:0px;
}
#menu ul li ul li{
display:block;
}
#menu ul li ul a{
display:block;
padding:7px 5px;
width:130px;
text-align:left;
font-weight:normal;
}
#menu ul li:hover ul{
display:block;
}
#menu, li ul{
background:#32444a;
}
.default{background:#0979cf;} Autor: Rosmel Aguilar Robles |