Menu desplegable con CSS

injhomosa1 · #1 (**permalink**) 27/05/2012, 23:46

Necesito crear un menu desplegable, de la forma mas facil por el momento.
les agradeceria su colaboración

SirAse · #2 (**permalink**) 28/05/2012, 04:07

Aqui tienes 2 sitios de como hacerlo:

http://www.lawebera.es/como-hacer/ej...e-css-html.php

http://dissenyaweb.com/blog/diseno_w...omment-page-1/

stinson · #3 (**permalink**) 28/05/2012, 04:25

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

seoista · #4 (**permalink**) 28/05/2012, 23:48

MENÚS DESPLEGABLES 100% CSS.

Saludos.