18. Menú horizontal  2 niveles

<ul id="navbar"> <!--Lista que define los elementos principales que se muestran siempre-->
<li><a href="http://aprenderaprogramar.com">Libros</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li> <!--SubItem de menú-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li> <!--SubItem de menú-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li><!--Item principal de menú-->
<li><a href="http://aprenderaprogramar.com">Humor</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Humor informático</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor programación</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li> <!--SubItem de menú-->
</ul>         
</li>
</ul>

CSS

/* Curso CSS estilos aprenderaprogramar.com*/
body {font: 92.5%/1.9 Arial, Helvetica, sans-serif;background-color: #eee; }
h2 {margin:0;}

/*Caja contenedora*/   
#wrap { font-size: 1.8em; width: 520px; padding: 30px;
        margin: 0 auto; /*Da lugar al centrado de la caja en el elemento superior body*/
        background-color: #fff;}

/* Estilos que crean el menú desplegable */
/*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar { padding:0; margin:0; }

/*Elementos items principales de menú que se muestran siempre*/
#navbar li { list-style: none; float: left; margin:10px;}
   
#navbar li a {
   display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
   padding: 3px 8px; background-color: #5e8ce9; color: #fff;
    border-radius: 10px; border: 4px double #fff;
   text-decoration: none; }

/*Listas de subitems de menú*/   
#navbar li ul {
   display: none; /*La lista inicialmente no se muestra debido a display:none; */
   background-color: #69f;
    border-radius: 5px; border: 1px dotted #fff;}
   
#navbar li:hover ul {
   font-size: 18px;
   display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
   position: absolute; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/
   margin: 0; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/
   }
#navbar li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */
   
/*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; }

/*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/   
#navbar li li a:hover { background-color: #8db3ff; }
   
.limpiador{padding:0; border-style:none; clear:both; } /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/