Parte principal de la página:
<body> <ul id = menú> <li> <a href =#> primer menú1 </a> <ul> <li> Segundo menú1 </li> <li> segundo menú1-1 </li> <li> segundo menú1-2 </li> <li> segundo menú1-3 </li> </ul> </li> <li> segundo menú1-3 </li> </li> <li> <a href Menu2</a> <ul> <li>Second Menu2-1</li> <li>Second Menu2-2</li> <li>Second Menu2-3</li> </li> </li> <li>Second Menu2-3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</li> <li> Segundo menú3 </li> </li> <li> Segundo menú3 </a> <ul> <li> Menú de segundo nivel 4-1 </li> <li> Menú de segundo nivel 4-2 </li> <li> Menú de segundo nivel 4-3 </li> </li> </li> <ul> </body>
Ejemplo de menú plegable:
Parte de CSS
<HEAD> <style tipo = text/css> li {list-style: none; Elimine los gráficos anteriores de la lista} li a {color:#123; Establezca el color de texto del menú de primer nivel} #menu ul {display: none; Establezca el menú secundario no se muestra de forma predeterminada} #menu> li: hover ul {display: block; Cuando el mouse se desliza a través del menú de primer nivel, se mostrará el menú secundario} </syle> </head>Ejemplo del menú de acordeón:
Parte de CSS
<HEAD> <style tipo = text/css> li {list-style: none; Elimine la figura anterior de la lista} li a {color:#123; Establezca el color de texto del menú de primer nivel} #menu> li,#menú> li> a,#menú> li> ul {float: izquierda; Menú de primer nivel, menú de segundo nivel que se mueve a la izquierda} #menu> li> a {display: block; color de fondo; rojo; } #menu> li: hover ul {display: block;}#menú> ul {display: none; Ancho: 100px; Color de fondo:#123; Padding-top: 20px;} </style> </head> ResumirEl anterior es el código de ejemplo para implementar el menú plegable y el menú de acordeón que le presenta el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!
Si cree que este artículo es útil para usted, reimprima. Por favor, indique la fuente, ¡gracias!