19. Menú horizontal 2 niveles

<div id="subnavbar">
<ul id="subnav">
<li><a href="#"
title="Inicio">Inicio</a>
</li>
<li><a href="#"
title="Texto">Menu 1 </a>
<ul>
<li><a href="#"
title="Texto">Submenu 1-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 1-2</a>
</li>
<li><a href="#"
title="Texto">Submenu 1-3</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 2</a>
<ul>
<li><a href="#"
title="Texto">Submenu2-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 2-2</a>
</li>
<li><a href="#"
title="Texto">Submenu 2-3</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 3</a>
<ul>
<li><a href="#"
title="Texto">Submenu 3-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 3-2</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 4</a>
<ul>
<li><a href="#"
title="Texto">Submenu 4-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 4-2</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 5</a>
<ul>
<li =><a href="#"
title="Texto">Submenu 5-1</a>
</li>
<li><a href="#"

title="Texto">Submenu 5-2</a>
</li>
<li><a href="#"

title="Texto">Submenu 5-3</a>
</li>
<li><a href="#"
title="Texto">Submenu 5-4</a>
</li>
</ul>
<li><a href="#" title="Texto">Contacto</a>
</li>
</li></ul></div>

CSS

#subnavbar {
width: 540px;
height: 33px;
font-weight:bold;
color: #000;
margin: 5px;
padding: 5px;
font-family:"Trebuchet MS";
background: #F1D7FF;
border-radius: 5px;
border: 4px double #3C005A;
}
#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #000;
display: block;
font-size: 16px;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
border: 1px dotted #3C005A;
}

#subnav li a:hover, #subnav li a:active {
background: #DDD7E0;
color: #fff;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background-color: rgba(186, 169, 207, 0.6);
background: rgba(186, 169, 207, 0.6);
color: rgba(186, 169, 207, 0.6);
color: #000;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background-color: rgba(221, 195, 233, 0.9);
background: rgba(221, 195, 233, 0.9);
color: rgba(221, 195, 233, 0.9);
color: #fff;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;

}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover
ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li
li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}