Cómo mostrar un submenú oculto frente a una lista desplegable

Escrito por chris hoke | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo mostrar un submenú oculto frente a una lista desplegable
Evitar que el elemento de submenú aparezca bajo el menú CSS. (Hemera Technologies/AbleStock.com/Getty Images)

Normalmente ocultas los submenús de un menú CSS de la vista usando la propiedad "display" de CSS para ajustar el elemento de submenú como oculto. Después podrás llamar al submenú de nuevo a la vista usando la pseudofunción "hover", que cambia la propiedad "display" de nuevo a un valor visible, como "block". Para evitar que el elemento de submenú aparezca bajo el menú CSS y otros elementos de página como las listas desplegables, necesitarás definir la propiedad "z-index" de CSS para dar al elemento de submenú una posición de orden de apilación,

Nivel de dificultad:
Moderadamente fácil

Instrucciones

  1. 1

    Abre el documento de página web que tiene el código de estilo del menú CSS en un editor de texto o HTML.

  2. 2

    Busca el código de estilo del menú CSS. Los menús CSS consisten en una serie de listas anidadas no ordenadas que tienen estilo CSS haciendo referencia a los nombres de elemento "ul" y "li". Los botones de navegación del menú principal CSS aparecen en la primera fila de los elementos "ul" y "li". Por ejemplo, "ul { float:left; margin: 0; padding: 0; z-index:1; }".

  3. 3

    Busca el código CSS que controla el estilo de los elementos del submenú. Este código oculta el elemento de submenú definiendo la propiedad "display" de los elementos de lista no ordenada del submenú como oculta o "none". Por ejemplo, "li ul { display:none; }".

  4. 4

    Haz clic para controlar tu cursor a la derecha del texto "display:none;" y pulsa la barra espaciadora.

  5. 5

    Escribe la siguiente línea de código:

    z-index:5000;

    Esta línea define la posición del orden de apilación del submenú a tanta altura como la posición del orden de apilación del menú principal, lo que hará que el submenú se muestre frente al menú y cualquier otro elemento de la zona donde se muestra el elemento de submenú.

  6. 6

    Haz clic para colocar el cursor al final del código del elemento de submenú, a la izquierda del símbolo "}" y pulsa "Intro" para crear una línea en blanco.

  7. 7

    Escribe la siguiente línea de código y pulsa "Intro".

    li:hover ul { display: block; }

    Esto define una pseudoclase "hover" de los botones de navegación principales en relación con el elemento de submenú. La propiedad "display:block;" vuelve a definir la propiedad de visualización del submenú como visible. Esto hará que el elemento de submenú se muestre en la pantalla cuando pasas el ratón sobre el botón de navegación del menú CSS con el cursor del ratón.

  8. 8

    Haz clic en el menú "Archivo" y pulsa "Guardar".

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles