Creacion de un menu para web tipo "Sprite" desplegable

[AhmedRugama]

Hola, prueva este, puedes ir agregando submenus, creando una lista <ul> dentro de un elemento <li>:

HTML:

Código:

<div id="menu">
<div class="container850">
<ul id="navmenu-h">
<li><a href="index.php">Inicio</a></li>
<li><a href="nosotros.php">&iquest;Qui&eacute;nes Somos? +</a>
<ul>
<li><a href="nosotros/submenu1.php">Submenu1</a></li>
</ul>
</li>
<li><a href="servicios.php">Nuestros Servicios +</a></li>
</ul>
</div>
</div>

CSS:

Código:

#menu{
width:100%;
border-bottom: solid 4px #b2daf7;
height:44px;
}
.container850{
width:850px;
margin:auto;
}

ul#navmenu-h { margin: 0 0 0 20px; padding: 0; list-style: none; position: relative;}

ul#navmenu-h ul {
 width: 190px; /* Sub Menu Width */
 margin: 0;
 list-style: none;
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
}

ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }

ul#navmenu-h li { float: left; display: inline; position: relative;}
ul#navmenu-h ul li { width: 100%; display: block;}

/* Root Menu */
ul#navmenu-h a {
 border-top: 1px solid #FFF;
 border-right: 1px solid #FFF;
 float: left;
 display: block;
 background: #d5ecfb;
 color: #69c;
 font: bold 0.76em Arial, sans-serif;
 text-decoration: none;
 height: 1%;
}
ul#navmenu-h > li a {
 padding: 13px 22px;
}
ul#navmenu-h ul a {
 padding: 6px 10px;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
 background: #69c;
 color: #FFF;
}

ul#navmenu-h .selected{
background:#b3dbf5;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
 float: none;
 background: #69c;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
 background: #039;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
 background: #999;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
 background: #666;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
 background: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
 background: #333;
}

/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }