Instrucciones de paso a paso gratis 
clase="envoltura de navegación"> clase="menú de navegación"> 
Crear un menú desplegable con html y css
Con un menú desplegable, crea una descripción clara y jerárquica de todas las partes importantes de la página y las subsecciones que contiene la página. Solo necesita mover el mouse sobre las secciones principales para que aparezcan las subsecciones. Puedes crear un menú desplegable usando solo HTML y CSS.
Pasos
Parte 1 de 2: escribir el HTML
1. Crea tu sección de navegación. Normalmente usas
2. Dale a cada sección un atributo de clase. Usaremos el atributo de clase más adelante para diseñar estos elementos con CSS. Dale al contenedor y al menú su propio atributo de clase.
3. Agregar una lista de elementos de menú. La lista desordenada ( 
4. Agregar enlaces. Si estos elementos del menú de nivel superior también se vinculan a sus propias páginas, ahora puede insertar los vínculos. Enlace a un ancla inexistente (como "#!"), incluso si no se vinculan a nada, por lo que el cursor del usuario se ve diferente. En este ejemplo, Contacto no conduce a ninguna parte, pero los otros dos elementos del menú sí:
-
Casa Los miembros del personal Contacto 
5. Crear sublistas para los elementos desplegables. Después de crear el estilo, estas listas forman el menú desplegable. Coloque la lista en el elemento de la lista sobre el que el usuario se desplazará. Agregue un atributo de clase y un enlace como antes.
-
Parte 2 de 2: escribir el CSS
1. Abre tu hoja de estilos CSS. Coloque un enlace a su hoja de estilo CSS en la sección de encabezado de su documento HTML si el enlace aún no está allí. En este artículo no cubriremos los conceptos básicos de CSS, como establecer una fuente y un color de fondo.
2. Añadir código clearfix. ¿Recuerdas cuando obtuviste el "arreglo claro"-clase a la lista del menú? Normalmente, los elementos del menú desplegable tienen un fondo transparente, lo que permite desplazar otros elementos. Un simple ajuste de CSS puede solucionar este problema. Aquí hay una buena solución rápida, aunque no funcionará en Internet Explorer 7 y versiones anteriores:- .arreglo claro:después de {
- contenido: "";
- pantalla: mesa;
- }
3. Crear el diseño básico. Con este código, puede colocar su menú en la parte superior de la página y ocultar los elementos desplegables. Esto es muy sobrio a propósito para que podamos centrarnos en el código relevante. Puede personalizarlo más tarde con código CSS adicional, como relleno y margen.- .envoltura de navegación {
- ancho: 100%;
- fondo: #008B8B;
- }
- .menú de navegación {
- posición: relativa;
- pantalla: bloque en línea;
- }
- .submenú {
- posición: absoluta;
- pantalla: ninguno;
- fondo: #555;
- }
4. Haga que los elementos desplegables aparezcan cuando pase el mouse sobre ellos. Los elementos de la lista desplegable ahora están configurados para que no se muestren. Aquí se explica cómo hacer que aparezca una sublista completa una vez que haya terminado "padre" se mueve:- .menú de navegación ul li: hover > ul {
- bloqueo de pantalla;
- }
- Nota: si los elementos del menú en el menú desplegable contienen menús adicionales, las propiedades agregadas aquí se aplicarán a todos los menús. Si desea que el estilo se aplique solo al primer nivel de los menús desplegables, use ".menú de navegación > ul".
5. Indicar con una flecha que hay un menú desplegable. Los diseñadores web normalmente muestran con una flecha hacia abajo que un elemento abre un menú desplegable. Este código agrega esa flecha a cada elemento de su menú:- .menú de navegación > ul > li:después {
- contenido: "25BC"; /*unicode escapado para la flecha hacia abajo*/
- tamaño de fuente: .5em;
- bloqueo de pantalla;
- posición: absoluta;
- }
- Nota: ajuste la posición de la flecha usando las propiedades de eigenschapen superior, inferior, derecha o izquierda.
- Nota: si no todos los elementos de su menú tienen menús desplegables, no rediseñe todo el menú de navegación de la clase. En su lugar, agregue otra clase (como un menú desplegable) a cada elemento li donde desee una flecha. Consulte esa clase en el código anterior.
6. Ajuste el relleno, el fondo y otras propiedades. El menú debería funcionar ahora, pero aún no es muy bonito. Las propiedades en CSS le permiten personalizar cómo se ve cada clase o elemento y dónde se encuentran.Consejos
- Si desea agregar un menú desplegable a un formulario, es muy fácil en HTML5 con el elemento
- con el enlace
- Si copia y pega el código de muestra, elimine todas las viñetas.
Artículos sobre el tema. "Crear un menú desplegable con html y css"
Оцените, пожалуйста статью
