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).