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>