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 FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

4 pensamientos en “Bonito Menu horizontal desplegable con CSS

    1. Alevsk
      Google Chrome 16.0.912.63 Mac OS

      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

      Responder

Deja un comentario

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