Los menús desplegables, también conocidos como menús "suckerfish", usan una combinación de HTML y CSS (hojas de estilo en cascada) para estructura y estilo. La parte HTML de un menú desplegable consta de listas de viñetas y listas de viñetas anidadas. Después de diseñar la barra de menú y los enlaces de navegación principales en CSS, puede diseñar las listas de viñetas anidadas como submenús. El selector ": hover" en CSS le permite cambiar la propiedad de visualización de un submenú oculto a "bloquear" para que vuelva a aparecer.
Paso 1
Codifique su menú en HTML usando "
"y"
"etiquetas:
Enlace 1
Enlace 2
Enlace 3
Agregue un div de reparación clara antes del final de la lista. Agregará un estilo a la clase "clearfix" para que el fondo del menú se estire hacia abajo.
Paso 2
Agregue su submenú como una nueva lista desordenada anidada dentro de las etiquetas "
" del enlace principal:
Enlace 1
Enlace 2
Enlace 1
Enlace 2
Enlace 3
Enlace 3
Paso 3
Abre tu hoja de estilo y dale estilo a tu menú usando CSS. Elimine las viñetas y la sangría izquierda: #menu {list-style: none; relleno: 0; } Tenga en cuenta que "#menu" coincide con el nombre de ID del código HTML de ejemplo.
Paso 4
Agregue un color de fondo a su barra de menú: #menu {list-style: none; relleno: 0; color de fondo: azul oscuro; }
Paso 5
Flota los elementos del menú a la izquierda para que se alineen horizontalmente en la barra de menús: #menu li {float: left; }
Paso 6
Diseñe los enlaces que componen los elementos de su menú. Agregue relleno a los enlaces para alinearlos verticalmente en la barra de menú mientras hace que sea más fácil hacer clic y pasar el mouse sobre ellos. Debe cambiar la propiedad "display" a "block" para agregar relleno a los enlaces: #menu li a {display: block; acolchado: 8px 15px; alinear texto: centro; color blanco; peso de fuente: negrita; "text-decoration: none;", 3, [[} Tenga en cuenta que en "relleno", se han establecido dos valores. El primer valor es el relleno vertical mientras que el segundo efectúa el relleno horizontal.
Paso 7
Diseñe el submenú y sus elementos. Primero necesita posicionar el submenú. Quite las viñetas y el relleno de los submenús también: #menu ul {position: absolute; estilo de lista: ninguno; relleno: 0; }
Paso 8
Elimine los flotadores de la izquierda de los elementos en los submenús: #menu ul li {clear: left; }
Paso 9
Agregue "dsiplay: none" a la regla "#menu ul" para desactivar el submenú, ya que no desea que aparezca a menos que el usuario se desplace sobre su elemento principal. Haga que el menú aparezca nuevamente usando este código: #menu li: hover ul {dipslay: block; }
Agregue la regla "clear fix" a su div: .clearfix {clear: both; }
Consejos
Agregue resaltado a los elementos de su menú cuando el usuario se desplace sobre ellos. Una regla de estilo para cambiar el color de fondo de un enlace sobrevolado se parece a "#menu a: hover {}".
Una vez que termine de crear su menú usando HTML y CSS, puede agregar un complemento jQuery para hacer animaciones agradables para los menús desplegables.
[Cómo crear un menú desplegable HTML y un submenú] URL: http://www.ordenador.online/computadora/Software/254864.html