Bonito Menu horizontal desplegable con CSS
Bueno hace rato mientras comía por puro ocio hice un menú desplegable con puro CSS nada de Javascript xD, bueno aquí se los pongo por si les gusta y lo quieren implementar en sus desarrollos (nunca esta demás tener recursos por ahí guardados)
A continuación esta el link para que descarguen el código fuente y un link hacia el ejemplo practico en acción:
index.html
![](img/Profile.png) Mi Perfil
[Editar Perfil](#)
[Listar](#)
[Agregar](#)
![](img/Home.png) Mi escuela
[Agregar](#)
![](img/Teacher.png) Profesores
[Agregar](#)
[Activos](#)
[Inactivos](#)
[Modificar](#)
[Borrar](#)
![](img/Student.png) Alumnos
[Mostrar todos](#)
![](img/Grades.png) Grados
[Agregar](#)
![](img/Claves.png) Claves
[Agregar](#)
![](img/Status.png) Status
[Agregar](#)
![](img/Types.png) Tipos
[Agregar](#)
menu.css
#menu { /*text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;*/
float:left; padding:10px; border:2px solid #003D4C; background-color: #fff; margin: 0px 0; font-weight:normal; color:#003D4C;
}
#menu ul { /*list-style-type: none;*/
margin:0;
padding:0;
width:auto;
float:right;
list-style:none;
}
#menu ul li.nivel1 { /*float: left;
width: 162px;
margin-right: 2px;*/
display:block;
float:left;
margin:0 0px;
margin-right:10px;
}
#menu ul li a {/*display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;*/
}
#menu ul li:hover {position: relative;
list-style:none;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {/*background-color: #6CC;
color: #000;
position: relative;*/
color: #003d4c;
text-decoration:none;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;border:1px solid #003D4C;
background-color: #fff;padding:5px;
}
#menu ul li ul li a {
/*width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
display:block;*/
width:160px;
background:none repeat scroll 0 0 #e0f8ae;
border:1px solid #7f9455;
line-height:15px;
margin:10px 0 0;
overflow:hidden;
text-align:center;
display:block;
height:auto;
color:#333333;
direction:ltr;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
padding:7px 3px;
}
#menu ul li ul li a:hover {
/*border-top-color: #000;
position: relative;
border:1px solid #003D4C;
background-color:#ecf5f8;*/
position: relative;
background:none repeat scroll 0 0 #FFEBE8;
border:1px solid #DD3C10;
line-height:15px;
margin:10px 0 0;
overflow:hidden;
text-align:center;
display:block;
height:auto;
color:#333333;
direction:ltr;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
padding:7px 3px;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
salu2