Un menu y bordes del fondo como esto

[BekoxD]

Hola,
Estoy intentando diseñar un template algo basico, encontre una imagen de un menu que me gusta, me gustaria que me hecharan una mano maso menos para tener idea de como funciona el stylo de ese menu.



Espero no causar molestia, no necesariamente quiero que me ayuden por completo, solo un inicio de como maso funciona el estilo :)

Muchas gracias de antemano!
Saludos
Beko

[Yefb]

No entiendo :-/

[BekoxD]

Iniciado por Yefb

No entiendo :-/

Lo que necesito es obtener como hacer en css y html lo que dejo marcado.



Gracias
Saludos

[javiandgo]

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.

[saul123]

Hola

Tambien tendrias que hacer el background con photoshop para que tubiera la sombra y los bordes redondeados , ya que el -moz-border no funciona en IE

[BekoxD]

Ya :)

Lo tengo algo avanzado miren en http://muchaonda.info/menu/

Pero necesito esto lo que esta señalado, por favor si me hechan la mano :)



puede sacar el codigo css de sitio.

Gracias
Saludos

[BekoxD]

Ya hice algunos avances, necesito pulirlo, alguien me ayuda por favor?

el menu lo puede ver en este enlace http://muchaonda.info/menu/

Saludos