Menú CSS3; problema con despliegue

[twilvaro]

Para ir practicando lo que voy aprendiendo en CSS, decidí hacer un diseño y llevarlo a código. Como sabía que el menú iba a ser lo que más problemas me iba a dar (junto a la Slider, que seguro que editar el aspecto de Flex Slider me llevará su tiempo y sudor), pues empecé por aquí.



Este es el aspecto. La idea es que, cuando pase por encima de casa pestaña, cambie de color también el borde superior e inferior del submenú.

Al pasarlo a código he tenido un pequeño problema con las fuentes, ya que Oswald con font-weight: 300; se ve cortada por la mitad en WebKit, así pues tuve que cambiarla a Roboto para el principal, y Oswald a 400 para los submenús. Pero bueno, eso no viene al caso...

El resultado (para entender también a lo que me refiero) lo pueden ver aquí: http://canwo.es/menu2.html.

Si van pasando por las opciones de navegación principal (Portada, PS3, PS2, PSVita, PSP, etc.) parece que está divino. Pero no es oro todo lo que reluce, y aquí llegó mi dilema, por el cual acudo a ustedes:

Si se posicionan en cualquier opción que no sea Portada, verán que al bajar para navegar por el submenú, los bordes de este se transforman en gris (a no ser que pasen muy rápido). Lo que pasa es que el submenú que aparece es el de la pestaña "iPhone".

He estado probando jugando con los z-index, pero nada. No he conseguido solucionarlo. Es más, si se fijan, en el que aparece predefinido (el submenú de portada), cuando pasan el cursor por el borde superior ya aparece el gris (es decir, el submenú de iPhone).

No lo entiendo porque yo tengo marcado que aparezcan -los submenús- cuando pasas por las opciones del menú de arriba (#contenedor ul li:hover ul.children).

Aquí les dejo la hoja de estilos: http://canwo.es/nav.css.

Espero que podáis conseguir guiarme porque ando bastante mareado con el tema. Gracias de antemano.

Un cordial saludo.

[Triby]

Prueba cambiando la opacidad de #contenedor ul li ul, está en 1, supongo que por eso siempre queda visible el último elemento.

[twilvaro]

Antes que nada, muchas gracias por responder y por mostrar interés en el tema.

Quizás no me expliqué muy bien, quedó demasiado teórico todo jeje.

Dejé opacity: 1; porque mi intención es que el submenú de Portada sea visible. Es decir: Según en qué sección esté el usuario, su categoría aparecerá resaltada (con su color de fondo) y su correspondiente submenú visible.

Por ejemplo: Si está en 3DS, se verá 3DS seleccionado en vez de Portada y el submenú visible o activo será el de 3DS (con bordes superior e inferior en rojo) en vez de el de Portada (bordes celestes).

Sé que el código, tal como está, no tiene una estructura clara en este sentido. Esto es porque mi prioridad era conseguir el efecto deseado, y luego ya organizarlo bien. Cuando este todo OK, crearé selectores tipo #activo.ps3, #activo.tresds, etc. No es un gran workflow, i know, denme tiempo...

He añadido comentarios para que se entienda mejor cada apartado del código, a ver si así detectáis por qué ocurre lo de que salte al último submenú (gris claro, el de iPhone) al pasar por el borde superior de cualquiera de los otros.

Pueden verlo (como ya les dije) aquí: http://canwo.es/nav.css

Gracias de nuevo. Un cordial saludo.

PD: Al cambiar a opacity: 0; no se soluciona, lo único es que no aparece el submenú visible en un principio (que es mi idea, que el submenú de la sección en la que esté navegando el usuario sea visible).

[Bandit]

Hola twilvaro:
Para empezar éste código: <div id="contenedor"> está mal colocado, debe de estar dentro del BODY y no afuera.
El problema que solamente muestre el color de borde del link .iphone es porque al colocar: #contenedor ul li:hover ul.children{ haces referencia a todos los hijo de ul y como éste último tiene los colores como borde: #333; al colocar el mouse sobre el borde superior de cualquier link lo muestra.
Tendrás que declarar para clase el hover
Prueba colocando así: #contenedor ul li:hover ul.nsd{ y verás que ya no sucede.
Debe de haber otro tipo de solución, pero por el momento no se me ocurre.

Espero haberte sido de ayuda.

[twilvaro]

Muchas gracias por responder Bandit. He probado tu propuesta y lamentablemente sigue sin funcionar.

Me ha dado por ocultar "#contenedor ul li:hover ul.iphone" y dejar las demás (.ps3, .ps2, .tresds, etc.), y aquí sí que cambia algo: Yo pensaba que al desactivar la de iPhone aparecería la de PC (que es la penúltima). Pensaba que la de iPhone aparecía porque era la última, y por lo tanto prevalecía sobre el resto, pero parece que no. Al ponerla entre /* */, ya no se abre su submenú al posicionarte sobre iPhone pero tampoco aparece cuando pasas el cursor sobre el borde superior de cualquera de los otros submenús.

Sin embargo, cuando te pones en cualquier categoría, por ejemplo 3DS, al bajar al submenú desaparece cuando pasas por su borde superior. Es decir, antes al pasar por el borde superior aparecía el submenú de iPhone y ahora lo que hace es desaparecer (y dejar visible el activo de Portada)...

Para entender mejor todo a lo que me he referido, aquí dejo el resultado http://canwo.es/menu2.html y aquí el código http://canwo.es/nav.css (ambos actualizados con la solución de Bandit y "#contenedor ul li:hover ul.iphone" ocultado como comentario).

En fin, a ver si tengo suerte y alguien da con la tecla.

De nuevo gracias y un saludo.

PD: Buena cantada la de la apertura del div contenedor fuera del body jeje. Ya lo anidé.

[pzin]

Mirando un poco encima, lo que ocurre es que el :hover se pierde al bajar con el mouse. Yo lo he solucionado dándole una altura de 68 pixeles a #contenedor ul li a, para que llegue hasta la parte inferior del borde de ul.children (63+5). Seguramente habrá otra forma de solucionarlo, porque alguna que otra cosa rara he visto por ahí. Por ejemplo el enlace no tiene porqué estar flotado, ya que es el único elemento de cada li —que es lo que realmente esta flotado.

Yo sería más específico con el asunto de las animaciones, e indicaría qué cosa exactamente quiero animar en vez de hacerlo con all; es más cómodo pero a veces resulta en cosas extrañas.