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

<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

Si te gusto comparte ...Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

4 comentarios en “Bonito Menu horizontal desplegable con CSS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.