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ú.
Cita: 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.