Como hacer un menú con submenús en HTML y CSS

Confeccionar un menú con subpestañas con html y css es relativamente fácil.


Lo primero que debemos pensar es la distribución de nuestro menú, como irá estructurado tanto el diseño como las urls, una vez dibujado a papel nuestro "mapa", debemos empezar a pintarlo mediante html y css, para ello creamos un nuevo documento con extensión .css y pegamos lo siguiente:

ul#menu {
 background: #333;
 width: 940px;
 float:left;
 padding: 5px;
}
  
ul#menu li {
 color: #fff;
 float: left;
 list-style: none;
 margin: 0% 5%;
}
  
ul#menu li:hover{
 color: #aaa073;
 cursor:pointer;
}
  
ul#menu ul {
 display: none;
 position: absolute;
 top: 49px;
 background: #333;
 color: #fff;
 padding: 5px 0px 5px 5px;
 margin: 0;
 }
  
ul#menu ul li{
 float: left;
 color: #fff;
 width:100%;
 margin:2% 0%;
}
 
 
ul#menu ul li a{
 color: #fff;
}
  
ul#menu ul li a:hover{
 color: #aaa073;
 cursor:pointer;
}
  
ul#menu li:hover ul ul,ul#menu li:hover ul ul ul,ul#menu li.iehover ul ul,ul#menu li.iehover ul ul ul {
 display: none;
 cursor:pointer;
}
  
ul#menu li:hover ul,ul#menu ul li:hover ul,ul#menu ul ul li:hover ul,ul#menu li.iehover ul,ul#menu ul li.iehover ul,ul#menu ul ul li.iehover ul {
 display: block;
 cursor:pointer;
}

Ahora abrimos un archivo con extensión .html o .php y copiamos el menú que queremos insertar en nuestra página web, en mi caso como prueba de este ejercicio realicé el siguiente:

<ul id="menu">
 <li>PESTAÑA 1</li>
 <li>PESTAÑA 2</li>
 <li>PESTAÑA 3</li>
 <li>PESTAÑA 4
  <ul>
    <li>SUBMENÚ 1</li>
    <li>SUBMENÚ 2</li>
  </ul>
 </li>
 <li>PESTAÑA 5</li>
</ul>

El aspecto del menú tal y como está ahora mismo sería el siguiente, el diseño lógicamente es totalmente personalizable a gusto del usuario: