¿Cómo creo menús desplegables de CSS?

Hojas de estilo en cascada (CSS) es un nombre utilizado para describir la forma en que se formatea un documento de Lenguaje de marcado de hipertexto (HTML) o Lenguaje de marcado extensible (XML). Se puede usar para cualquier tipo de documento XML, pero se usa con mayor frecuencia con páginas web escritas en HTML. CSS se puede utilizar para crear menús desplegables en páginas web. Los menús desplegables de CSS tienen un solo elemento de texto que se muestra hasta que el visitante usa el mouse para desplazarse sobre el menú, en cuyo punto se muestra la lista completa de elementos. El menú se crea utilizando la identificación CSS y las etiquetas de clase.

Los menús desplegables de CSS comienzan con el selector de ID. Este selector se parece a #. Le sigue el nombre de la ID. Puede asignarle un nombre a la ID, pero debe ser descriptivo para que otros puedan leer su código. Por ejemplo, un menú desplegable puede usar el código # drop1.

Cree la clase para el primer elemento en el menú desplegable de CSS utilizando el selector de clase, que parece un punto. La clase será parte del elemento de la lista HTML. El elemento de la lista se designa con los caracteres "li". Cree la clase de nivel superior escribiendo "li.top". La descripción de la clase está contenida entre dos llaves.

El siguiente ejemplo muestra el código CSS completo para el primer elemento de la lista:

# drop1 li.top {font-family: Verdana, Ginebra, san-serif;
tamaño de fuente: 100%;
color: # FF00FF;}

A continuación, cree una clase para los elementos que se ocultarán debajo del primer elemento en el menú CSS. La clase describirá la lista desordenada de HTML, que se designa con los caracteres "ul". La descripción se verá esencialmente igual que el elemento de menú de nivel superior, con la adición de las palabras "display: none # 59" al comienzo de la descripción. Esto indica que los elementos de la lista desordenada estarán ocultos hasta que el puntero se desplace sobre el menú desplegable CSS.

El siguiente es un ejemplo de esta parte del código CSS:

# drop1 ul.link {
pantalla: ninguna # 59
Familia tipográfica: Verdana, Ginebra, san-serif;
tamaño de fuente: 100%;
color: # FF00FF;}

Deberá que aparezca el menú desplegable de CSS sobre el resto del documento HMTL. De lo contrario, cuando el visitante se desplace sobre el menú, empujará el resto del documento hacia abajo de la página para dejar espacio para la lista. Establecer el elemento de posición en absoluto hará esto.

El código para establecer la posición es:

# drop1 {position: absolute;}

Eso es todo lo que se necesita para la parte CSS del menú desplegable. El resto del menú desplegable de CSS se crea en el documento HTML utilizando los elementos "div", "id", "class", "li" y "ul". La etiqueta "div" separa la parte del menú del documento. Escriba <div id = "drop1"> para crear la parte del menú desplegable. Luego, inicie la lista desordenada utilizando el elemento HTML "ul".

Agregue la clase superior al primer elemento de la lista y la clase de enlace para el resto de los elementos. El código HTML debería ser similar a:

<div id = "drop1">
<li class = "top"> Artículo superior </li>
<li class = "link"> <a href="#"> Artículo </a> </li>
<li class = "link"> <a href="#"> Artículo </a> </li>
<li class = "link"> <a href="#"> Artículo </a> </li>
</ul> </div>

Cuando abre el documento en un navegador web, el menú desplegable CSS aparecerá como un elemento único en la página. Cuando mueva el mouse sobre el elemento superior, aparecerá el resto del menú. El resto del texto en la página no se moverá, pero el menú ocultará una parte.