Creacion de un menu para web tipo "Sprite" desplegable

[Mr_Raymon]

Hola a todos.

Tengo diseñado menu de tipo "Sprite" que me gustaria que fuera desplegable. Imagino que habreis visto el menu de la web de Apple (no es por hacer publicidad :P) solo que en mi caso he tenido que especificar en cada enlace el tamaño de la seccion ya que no es la mismo que en caso de Apple. Pongo de ejemplo una web para que veais lo que quiero conseguir.

w.w.w.elcorteingles.es (No pretendo hacer SPAM es poner un ejemplo).

¿Es posible hacerlo por CSS sin morir en el intento? He visto que se puede hacer con imagenes por separado pero en mi caso es una imagen con los tres estados (normal, encima [rollover] y pulsando).

Tambien tengo que decir que el tamaño de cada uno de los submenus sera diferente y tendria otro submenu que saldria por la derecha.

Saludos y Gracias.

[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; }

[Mr_Raymon]

Gracias por responder AhmedRugama y por el menu.

Aunque me gustaria que me explicaras como lo has creado paso a paso y como aplicarlo a un menu creado al estilo "Sprite".

De todas formas voy a cambiar el ejemplo por una web para que todo el mundo vea, mas o menos lo que quiero conseguir.

Saludos y Gracias.

[armandoweb]

Hola:

Revisa estos ejemplos:

http://jorenrapini.com/blog/web-deve...overs#post-137
http://www.cristalab.com/tips/menu-c...rites-c65689l/
http://alexsancho.name/archives/2005...ontal-con-css/

Saludos.

[armandoweb]

Hola de nuevo:

Aqui hay una variacion de uno de los ejemplos anteriores que se hace desplegable:

http://jorenrapini.com/blog/web-deve...downs#post-170

Saludos.

[Mr_Raymon]

Iniciado por armandoweb

Hola de nuevo:

Aqui hay una variacion de uno de los ejemplos anteriores que se hace desplegable:

[url]http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170[/url]

Esto es justo lo que quiero hacer solo que el menu seria en horizontal. El menu ya lo tengo hecho hace tiempo en CSS con los 3 estados (normal, hover y active). Seria hacerlo sin volverme loco ya que necesito verlo paso a paso para enterarme bien del asunto.

Saludos.

[Mr_Raymon]

Estoy trasteando con el tema del menu y tengo algunas dudas:

- Es una pregunta tonta pero realmente ¿que significa esto? (ejemplo de la web publicada por armandoweb):

#navigation ul :hover ul ul
#navigation ul :hover ul :hover ul

Entiendo que dentro de #navigation ataca al ul y le añade el efecto hover pero y ¿lo de despues? No lo entiendo muy bien.

- Otra duda que tengo es si es mas correcto poner "display:none" o "visibility:hidden". En teoria es mas correcto el visibility ya que de alguna manera con display desaparece y no lo oculta como lo haria con visibility. Tambien es mas recomendable para los buscadores.

¿Que opinais al respecto?

Saludos y Gracias.

[bkolores]

supongo que es por el tratado al submenu que deberia estar en un ul ej.

Código HTML:

<ul>
<li>a</li>
<li>
  <ul>
    <li>b</li>
  </ul>
</li>
</ul>
 

[AhmedRugama]

Hola, Mr_Raymon

lo de #navigation ul :hover ul :hover ul se refiere al ul que esta dentro del li del primer ul, asi como te respondio bkolores,


la diferencia entre display:none y visibility: hidden
es que con visibility:hidden el objeto toma el espacio que requiere aunque esta oculto, con display:none es como si no estuviera

[Mr_Raymon]

Tengo un par de dudas mas sobre el menu. Adjunto imagen.



He conseguido añadir a cada elemento del menu la imagen del circulo con la flecha mediante una clase y en esa clase añadir un background con el enlace de la imagen a cada "li". El problema que tengo es que si alguien quiere acceder al submenu es mas complicado ya que no tiene suficiente ancho y por lo tanto desaparece. Si amplio el ancho de los li queda bastante feo y me gustaria que fuese accesible sin que quede feo. SOLUCIONADO

La otra duda que tengo es como conseguir poner una linea verde a cada elemento. Se me ha ocurrido que podria hacerlo añadiendo un div debajo de cada elemento, background y repetido en X. Imagino que no creo que sea la mejor solucion pero ¿hay otra en esta situacion?

Saludos y Gracias.

[Mr_Raymon]

Primera duda resuelta. Lo que hecho en vez de poner la posicion "right" le he puesto un numero en pixeles y arreglado.

Pero todavia no se como solucionar lo de la linea.

Saludos.

[Mr_Raymon]

Segunda duda resuelta. Funciona poniendo un div y una imagen de fondo repetida en X, aunque no es el mejor metodo pero en mi caso es valido ya que asi puedo poner las lineas con relieve.

Tambien valdria añadir la propiedad border-bottom a los <li> pero se aplicaria a todos y no tendria el relieve.

Saludos.