El problema de los menús que no se despliegan

Toda etiqueta es un rectángulo, si tiene un borde o un color de fondo esto es evidente pero, si no lo tiene, sigue siendo un rectángulo que ocupa un determinado espacio y se ubica en una determinada posición de la página. Esta es la clave de todo, entender eso y además, tener en cuenta que el orden en que son agregadas influirá en su resultado ya que, aunque las veamos ubicadas gráficamente de cierto modo, para el navegador, eso, sólo es un dibujito ya que todos ellos siguen una regla sencilla: para ellos, el orden natural es secuencial, de arriba hacia abajo y de derecha a izquierda.

Es cierto que pueden mostrarse de cualquier otro modo, para eso están las propiedades (float, position, margin, etc) pero, al navegador, no le interesan esos detalles y eso, justamente, es lo que puede crear conflictos o problemas.

Si toda etiqueta es un rectángulo real (tiene ancho y tiene alto aunque no los definamos) y armamos algo como esto, donde simplemente hay dos DIVs, uno arriba y otro abajo y al de abajo lo "subimos" un poco con un margen negativo, tal vez, dependiendo de las reglas de estilo que tengamos, el enlace que está allí, no funcionará. Si ponen el cursor encima y tratan de hacer click, no pasará nada, ni siquiera veremos la manito indicativa:

A B C D E F

un enlace

¿Por qué pasa esto? porque el de arriba está encima del enlace y, aunque es transparente, sus reglas de estilo TAPAN el enlace. Si le pusiéramos un color de fondo, lo veríamos claramente:
ver | restaurar.

¿Cómo se soluciona? Lo lógico sería repasar las reglas de estilo de esas etiquetas ¿No será que uno es demasiado alto y compensamos eso con márgenes negativos? ¿Es necesaria la propiedad position? Las respuestas pueden ser infinitas y no pretendo darlas, todo dependerá y, llegado el caso, siempre nos queda la opción de usar z-index. En este ejemplo, bastaría invertir el orden:

CORREGIR EL ERROR | ver error

Este mismo problema es el que genera muchísimas consultas sobre menús que no se despliegan aunque, en realidad, no es que no se desplieguen sino que no se ven desplegados.

Si tenemos un contenedor (un DIV) con ese menú que vimos armadito y lo agregamos al header de nuestro sitio, tal vez, dependiendo de dónde lo hayamos puesto y de las reglas de estilo del resto de nuestra página, se verá bien pero ¿no funciona?

• menu 1
• menu 2
  • submenu 2.1
  • submenu 2.2
  • submenu 2.3
• menu 3
  • submenu 3.1
  • submenu 3.2
  • submenu 3.3
• menu 4

Aliquam erat volutpat. Phasellus ligula augue, hendrerit sit amet pharetra et, auctor nec odio! Nunc placerat facilisis volutpat! Donec nisi elit, convallis nec vestibulum ac, aliquam quis magna! In aliquet arcu eget mi mollis at porta erat condimentum. Pellentesque congue ante non felis fringilla mattis. Morbi urna lectus; laoreet id tempor vitae, pretium id nibh. Sed nisl eros, molestie non luctus nec, pretium nec felis. Praesent pharetra egestas interdum. Quisque consequat placerat mi, in pharetra nisl mattis in. Aenean id orci vel enim ultrices eleifend!

¿Por qué sólo se ve un pedacito? Por el mismo motivo que el enlace del ejemplo anterior no funcionaba aunque, en este caso, no se trata de una etiqueta que es demasiado alta y tapa a la de abajo sino de una etiqueta cuya altura es escasa (UL LI) y que contiene otras que sólo se ven cuando se coloca el cursor encima pero, no tienen espacio suficiente ya que la etiqueta que está debajo (el texto), ocupa ese lugar así que queda encima del menú desplegado.

Otra vez, esto se resuelve con z-index:

CORREGIR ERROR | ver error

¿Y que es z-index? Un numero de orden que sólo se aplica a los elementos que tengan definida la propiedad position como relative, absolute o fixed y, dicho muy livianamente, indica cuál está encima de cuál; por defecto, se "apilan" en el mismo orden en que se encuentran en el código así que en este caso, la segunda (el texto) tiene un valor implícito de z-index, superior a la primera (el menú) y bastaría invertir ese orden para que el menú se viera desplegado.

Dependiendo del caso (he usado muchas veces la palabra depender porque nada de todo esto es una ciencia exacta) deberemos agregarle las propiedades z-index al menú y al div inferior (un valor más alto al menú); o bien, simplemente, sólo agregar la propiedad z-index al menú (una valor cualquiera, no hace falta poner valores exorbitantes):

#mi-menu {
  position:relative;
  z-index: 100;
}