Crear un un Menu Desplegable con CSS y HTML

En esta entrada del blog vamos a explicar como crear un sencillo menú desplegable utilizando  html y css similar al que tengo colocado en este blog.

• Empezamos con el código html del menú .Utilizamos  las etiquetas <ul> para crear una lista y <li> para cada punto de esa lista. Estos puntos serán los elementos superiores del menú y dentro de ellos será donde creamos otras listas anidadas que serán el contenido desplegable

<div id="contenedor">
<ul class="desplegable">
     <li><a href="apart">Apartado A </a> </li>
     <li><a href="apre"> Apartado B </a>
           <ul>
                 <li> <a href="primero"> Primero </a> </li>
                 <li><a href="segundo">Segundo </a></li>
                 <li><a href="tercero"> Tercero </a>  </li>
                 
           </ul>
     </li>
      <li> <a href="apartadoc">Apartado C </a></li>
      <li> <a href="apartadod">Apartado D </a>
           <ul>          
                 <li> <a href="tre">despues </a> </li>
                 <li> <a href="r"> entrada </a></li>
                 <li> <a href="f"> salida </a>  </li>
           </ul>
     </li>
     <li> <a href="apartadoe"> Apartado E </a> </li>
</ul>
</div> 

• El resultado de este código HTML sería una lista como la siguiente:

• Y ahora vamos con el código CSS para transformar esa lista html en un menú horizontal desplegable. Para ello utilizamos las propiedades hover  y display

* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;  /* Evitar que los menus se desplacen a derecha */
}
  
#contenedor {
text-align: center;
margin: 20px auto;  /* para centrar el div */
}

.desplegable {
     display: inline-block;   /* para centrar el menú en la pantalla  */
}

.desplegable li {
     float:left;  /*  para que el menu sea horizontal */
}

.desplegable li ul li {
     float: none;  /* para que el menu se despliegue en vertical */
}

.desplegable li ul {
     display:none;  /* el desplegable no es visible por defecto */
}

.desplegable li:hover ul {
     display:block;  /* al pasar sobre el menu se hace visible  */
}

.desplegable li a {
     background:black;
     color:#FFF;
     display:block;
     border:1px solid red;
     padding:14px 14px;
     margin:2px;
}

.desplegable li a:hover {
     background: red; 
}

• Y el resultado final que obtenemos al aplicar este CSS podemos comprobarlo en este enlace .