menu normal usando clases
ejemplo
Código HTML:
<style>
#menu-superior {background:#CCC;}
#menu-inferior {backgroun:#F1F1F1;}
#menu-superior .item {padding:5px 10px;}
#menu-superior .noselect {color:#444; border-left:1px solid #333; border-top:1px solid #333; border-rigth:1px solid #333;}
#menu-superior .active, #menu-superior .hover {color:#000; background:#F1F1F1; padding-top:2px;}
</style>
<div id="menu">
<div id="menu-superior">
<ul>
<li><a href="#" class="item noselect">Site Settings</a></li>
<li><a href="#" class="item active">Site Pages</a></li>
<li><a href="#" class="item noselect">Site Theme</a></li>
</ul>
</div>
<div id="menu-inferior">
<li><a href="#" class="active">Home</a></li>
<li><a href="#" class="item">Galleries</a></li>
<li><a href="#" class="item">Contact</a></li>
</div>
</div> seria algo así aunque tendrías que ver que niveles de capa se tiene para poder perfeccionar el efecto. El .hover y .active del menú superior tendrían que tener fondo del mismo color del menú inferior, para crear el efecto de fusión. Aquí solo muestro como es el css para el efecto pero tendrás que darle el estilo correspondiente para posicionar los menúes de forma horizontal.