practica

Lo primero que vamos a hacer es crearnos nuestro menú mediante una lista desordenada e indicarle las opciones del menú que tendrán un "submenu", para hacer esto dentro de la opción del menú volvemosa crear una lista desordenada, pudiendo quedar de la siguiente forma:


Inicio
Acerca de

Historia
Trabajos
SedeContacto

Telefono
Correo
Oficinas






A continuación vamos a poner el estilo para que nuestro menú tenga un aspecto similar alsiguiente:

menu sencillo desplegable

Como vimos en las entradas anteriores tendremos que añadir el código CSS necesario para que nos ponga la lista en una línea, nos quite los puntos de la lista ytodas las opciones tengan el mismo tamaño, quitar los margenes, que al situarnos en una opción cambie de color, etc.. pudiendo ser un código similar al siguiente:

.menu{
list-style:none;padding:0px;
margin:0px;
}
.menu li{
margin:0px;
padding:0px;
float:left;
position:relative;
box-shadow: 2px 2px 4px 1px #000;
}
.menu li a{
display: block;
width: 100px;
height:30px;
padding: 6px;
line-height:30px;
text-decoration: none;
text-align: center;
color: #FFF;
background-color: #063;
position: relative;
border-left: 2px solid #333;

}
.menu lia:hover{
color:#CF3;
background-color:#603;
}
A continuación debemos indicarle como queremos que se vean las opciones del "submenu" o del menu desplegable, indicándole el ancho el alto, los colores,bordes, etc… también pondremos un efecto de transición a la opacidad para que cuando se muestren las opciones no salgan de golpe. Quedando algo similar a:

.menu ul{
position:absolute;left:10px;
top:36px;
margin:0px;
list-style:none;
padding:0px;
opacity:0;
transition:opacity .35s ease .2s;
-webkit-transition:opacity .35s ease .2s;
-moz-transition:opacity .35s ease .2s;...