Cómo crear el efecto del menú plegable de Apple en HTML5

1. Agregue la siguiente definición de estilo en el área headgt; de la página:

lt; style type="text/css"gt

#dlmenu {height: 10em; ;}

#menu {tipo de estilo de lista: ninguno; margen: 0 0 10px; relleno: 0; ancho: 15em;

#menu li {display: block; padding: 0; margin: 0. }

#menu li: hover, #menu li a: hover {border: 0;}

#menu li: desplazar dt a, #menu li a: desplazar dt a {fondo: #d4d8bd url(top_grad_2.gif) centro color: #ff0; menú li: desplazar dd, #menú li a: desplazar dd {display: block;}

#menu li: desplazar dl, #menu li a: desplazar dl {height.20em fondo: #b4be9c url; (sub_grad. gif);}

#menu table {border-collapse: colapso; relleno: 0; margen: -4px; tamaño de fuente: 1em;}

#menu li : desplazar dl, #menu li a: desplazar dl {ancho: 15em; margen: -4px; tamaño de fuente: 1em;}

# menú dl {ancho: 15em; fondo: 0; 6f9c6f; cursor: puntero;}

#menu dt {margen: 0; relleno: 0; tamaño de fuente: 1.1em; borde superior: 1px sólido #cce;}

#menu dd {margen: 0; relleno: 0; tamaño de fuente: 1em; alineación de texto: izquierda; }

.galería dt a, .galería dt a: visitado {pantalla: bloque; #fff; relleno: 5px 5px 5px 10px; fondo: #949e7c url(top_grad.gif) centro; }

.gallery dd a, .gallery dd a: visitado {color: # 000; altura: 1em; decoración de texto: ninguna; pantalla: bloque; relleno: 4px 5px 4px 20px; fondo: #b4be9c url(sub_grad.gif);* html .gallery dd a, * html . galería d

d a: visitado {altura: 1em;}

.galería dd a: hover {fondo: #7aa; color: #ff0;}

lt;/stylegt;

2

lt;div id="dlmenu"gt;

lt;ul id="menu"gt;

lt;ligt;

lt;! --[if lte IE 6]gt;lt;a href="#nogo"gt;lt;tablegt;lt;trgt;lt;tdgt;lt;![endif]--gt;

lt；dl class="gallery"gt;

lt;dtgt;lt;a href="./menu/index.html"gt;DEMOSlt;/agt;lt;/dtgt;

lt；ddgt;lt;a href="./menu/zero_dollars.html" title="Página de publicidad de cero dólares"gt;cero dólareslt;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu/embed.html" title="Ajustar texto alrededor de la imagen"gt;Ajustar textolt;/agt;lt;/ddgt;

lt ;ddgt; lt;a href="./menu/form.html" title="Hoja de estilo"gt;Hoja de estilolt;/agt;lt;/ddgt;

lt;ddgt;lt; ./menu/nodots.html" title="Eliminar actividad/borde de enfoque"gt;actividad focuslt;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu /shadow_boxing.html" title="Sombra multiposición"gt;Shadow Boxlt;/agt;lt;/ddgt;

lt;ddgt;lt;a href=" /menu/old_master.html " title="Detalles del mapa de imagen"gt;maplt de imagen;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu/ bodys.html" title="El lo divertido de usar imágenes de fondo"gt;La diversión de usar fondoslt;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu/ fade_scroll.html" title=" Desplazamiento desvanecido"gt; Desplazamiento desvanecidolt;/agt;lt;/ddgt;

.