Menus con CSS

En este post explicaremos como crear menús con HTML y CSS. El código no es excesivamente complicado, os lo dejamos:

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
  <ul>
    <li>Submenu 1</li>
    <li>Submenu 2</li>
  </ul>
 </li>
 <li>Pestaña 4</li>
</ul>

A