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