Fuente: meyerweb

HTML

<div id=”menu4″>
<ul id="topmenu">
<li class="sub"><a href="http://menus.blogsome.com/">Menus</a>
<ul>

<li class="sub"><a href="http://www.wordpress.org/">WordPress</a>
<ul>
<li><a href="http://www.blogsome.com/">Blogsome</a></li>

<li><a href="http://www.proyectoisla.com/planetawp/">Planeta WordPress</a></li>
</ul>
</li>
<li><a href="http://www.mozilla-europe.org/es/products/firefox/">Firefox</a></li>

<li class="sub"><a href="http://juglar103.blogsome.com/">Juglar</a>
<ul>
<li><a href="http://www.bloglines.com/blog/Juglar">Bloglines Blog</a></li>

<li><a href="mailto:juglar103@gmail.com">Contacto</a></li>
</ul>
</li>

</ul>
</li>
</ul>
</div>

CSS

#menu4 ul {
padding: 0;
margin: 0;
border-bottom: 1px solid silver;
font: 1em sans-serif;
}
#menu4 ul li {
list-style-type: none;
border: 1px solid silver;
border-width: 1px 1px 0 3px;
position: relative;
margin: 0;
padding: 0;
}
#menu4 ul ul {
display: none;
}
#menu4 ul li:hover > ul {
display: block;
position: absolute;
top: -1px; left: 100%;
}
#menu4 li a {
display: block;
padding: 5px 7px;
text-decoration: none;
background: #ccc;
}
#menu4 ul#topmenu li a:hover {
background: yellow;
}
#menu4 li.sub > a {
font-weight: bold;
background: #ccc;
}

#menu4 ul#topmenu {
width: 6em;
position: absolute;
top: 150px;
left: 520px;
}
#menu4 ul#topmenu > li:hover > ul {
width: 10em;
top: 1.5em;
left: -3px;
}
#menu4 ul ul {
width: 10em;
}