Cómo crear un menú con submenú simple con CSS

Vamos a realizar un menú con submenú con CSS, un elemento muy usado y útil para todos aquellos que quieren iniciarse en la programación web. Primeramente vamos a mostrar el resultado final en CodePen antes de pasarnos a explicar como se realiza este menú paso por paso:

See the Pen Menú simple con CSS by Sergio Clebal (@sukafe) on CodePen.dark

Como vemos es un simple menú con dos submenús que suelen ser lo máximo cuando realizamos un <nav> de esta forma. Aunque sea un ejemplo simple, esta es la base para hacer muy buenos menús en los que sin utilizar JavaScript tengamos un resultado muy bueno.

HTML

<nav>
<ul id="menu">
<li>Inicio</li>
<li>Nuestra labor</li>
<li>Quienes Somos</li>
<li id="sub-menu">Productos
<ul>
<li>Naranjas</li>
<li>Sandias</li>
<li>Melones</li>
<li>Manzanas
<ul>
<li>Bonitas</li>
<li>Feas</li>
</ul>
</li>
</li>
<li>Contacto</li>
</ul>
</nav>

El código HTML es bastante simple. Podemos ver primero la etiqueta nav, etiqueta contenedora del menú para navegar entre las distintas páginas de nuestra web, la cual contiene una lista no ordenada ul con una serie de elementos li. Para crear el submenú, lo que haremos será en una de la etiquetas li, antes de cerrarla crearemos de nuevo una lista no ordenada que será el nuevo submenú y a partir de ahí podemos añadir nuevos elementos.

CSS

* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}

#menu {
background-color: #E53935;
height: 35px;
width: 100%;
}

#menu li {
height: 35px;
background-color: #E53935;
transition: 0.25s;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
display: table-cell;
color: #fff;
list-style: none;
cursor: pointer;
}

#menu li:hover {
background: #D32F2F;
}

#menu ul {
display: none;
position: absolute;
top: 35px;
background: white;
color: #fff;
margin: 0;
box-shadow: 1px 1px 1px black;
}

#menu ul li {
display: table-cell;
vertical-align: middle;
color: #fff;
padding: 5px 10px 5px 10px;
}

#menu li:hover ul ul,
#menu li:hover ul ul ul {
display: none;
}

#menu li:hover ul,
#menu ul li:hover ul,
#menu ul ul li:hover ul {
display: table-cell;
margin-left: -10px;
}

El código CSS es un código sencillo que está preparado para tener hasta tres submenú y además funciona en distintos navegadores. Si quisiéramos añadir soporte para más submeú, tendríamos que añadir una linea más #menu li:hover ul ul ul como esta en su correspondiente lugar para que el nuevo nivel de submenú este no visible, y además añadir una nueva linea como la siguiente #menu ul ul li:hover ul  con un ul más después del :hover.