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
<div id="menu"> <ul> <li class="nivel1"><img src="img/Profile.png" alt="" /> Mi Perfil <ul> <li><a href="#">Editar Perfil</a></li> <li><a href="#">Listar</a></li> <li><a href="#">Agregar</a></li> </ul> </li> <li class="nivel1"><img src="img/Home.png" alt="" /> Mi escuela <ul> <li><a href="#">Agregar</a></li> </ul> </li> <li class="nivel1"><img src="img/Teacher.png" alt="" /> Profesores <ul> <li><a href="#">Agregar</a></li> <li><a href="#">Activos</a></li> <li><a href="#">Inactivos</a></li> <li><a href="#">Modificar</a></li> <li><a href="#">Borrar</a></li> </ul> </li> <li class="nivel1"><img src="img/Student.png" alt="" /> Alumnos <ul> <li><a href="#">Mostrar todos</a></li> </ul> </li> <li class="nivel1"><img src="img/Grades.png" alt="" /> Grados <ul> <li><a href="#">Agregar</a></li> </ul> </li> <li class="nivel1"><img src="img/Claves.png" alt="" /> Claves <ul> <li><a href="#">Agregar</a></li> </ul> </li> <li class="nivel1"><img src="img/Status.png" alt="" /> Status <ul> <li><a href="#">Agregar</a></li> </ul> </li> <li class="nivel1"><img src="img/Types.png" alt="" /> Tipos <ul> <li><a href="#">Agregar</a></li> </ul> </li> </ul> </div>
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
Esta muy bonito el menu pero no funciona en ie y al imprimir desde mozilla se desconfigura.
Hola, si es por que IE no soporta algunas características de CSS, pero pronto voy a publicar algunos que funcionan en la mayoría de los navegadores 🙂
salu2