Cómo implementar un menú desplegable usando programación HTML

El menú desplegable es realmente muy sencillo de implementar usando HTML css y algunos js pequeños.

En primer lugar, debes tener al menos 2 divs y luego agregar el primero. un div como elemento principal y luego use position: absoluta; colóquelo absolutamente;

Luego use JS para obtener el objeto y luego agregue un evento de mouse onmouseover

Aquí déjame te muestro un código que escribí antes

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/ DTD/xhtml1-transitional.dtd"gt;

lt;html xmlns="http://www.w3.org/1999/xhtml"gt;

lt;headgt;

lt;titlegt;Menú de navegación desplegable secundario conciso y práctico;/titlegt;

lt;meta http-equiv="content-type" content=" text/html; charset=gb2312"gt;

lt;!--Agregue el siguiente código entre lt;headgt; y lt;/headgt;--gt;

lt; style type=" text/css"gt;

cuerpo, html{padding: 0; margen: 0; text-align: center; fuente: normal 14px 'arial';}

#mainNavBar{ ancho: 100; fondo: #999; relleno: 10px 0;}

#nav{ancho: 760px; alto: 30px; margen: 0 auto;}

#nav ul{ relleno: 0; margen: 0;}

#nav ul li{posición: relativa; flotador: izquierda; ancho: 60px; altura de línea: 30px; -type: none;}

#nav ul li a{display: block; color: #fff; text-decoration: none;}

#nav ul li a: hover{ peso de fuente: negrita; fondo: #666;}

#subNav{posición: absoluto; ancho: 150 px; arriba: 30 px; relleno: 5 px; fff; alineación de texto: izquierda; }

#subNav a{text-decoration: none; font-weight: normal; display: block;}

#subNav a: hover{ color: #f00; fondo: #f00;}

lt;/stylegt;

lt;/headgt;

lt;

lt;!--Agregue el siguiente código a

lt;bodygt;andlt;/bodygt;--gt;

lt;div id="mainNavBar"gt;

lt;div id="nav"gt; >

lt;ulgt;

lt;ligt;

lt;a href="#"gt;Addlt;/agt;

lt; div id="subNav"gt;

lt;a href="#"gt;Escribir un loglt;/agt;

lt;a href="#" gt; categoríalt;/agt;

lt;/divgt;

lt;/ligt;

lt;ligt;

lt;a href="#"gt;Editlt;/agt;

lt;div id="subNav"gt;

lt;a href="#"gt; Modificar categoríalt;/ agt;

lt;a href="#"gt;Edición del artículolt;/agt;

lt;/divgt;

lt;/ligt;

lt;ligt;

lt;a href="#"gt;Adminlt;/agt;

lt;div id= "subNav"gt;

lt;a href="#"gt;Gestión de artículoslt;/agt;

lt;a href="#"gt;Gestión de comentarioslt; /agt;

lt;a href="#"gt;Gestión de mensajeslt;/agt;

lt;a href="#"gt;Exitlt;/agt;

lt;/ divgt;

lt;/ligt;

lt;/ulgt;

lt;/divgt;

p>

lt;/divgt;

lt;script language="javascript"gt;

var nav=document.getElementById("nav").getElementsByTagName("li ");

for(i=0; ilt; nav.length; i ){

nav[i].onmouseover=function(){

this.style.fontWeight ="bold";

this.style.overflow="visible";

this.style.background="#666666"

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal";

this.style.background ="#999999"

this.style.overflow="hidden";

}

}

lt;/scriptgt

lt;/htmlgt;

p>#header #shousuo{

ancho: 950px;

alto: 50px

fondo: #f4f4f4; arriba: 10px;

}

#shousuo ul li{

altura de línea: 50px;tipo de estilo de lista: ninguno;

flotante: izquierda;

margen izquierdo: 5px;

peso de fuente: negrita

tamaño de fuente: 14px;

}?