Español
Código de efectos especiales de página web: Menú desplegable de página web hecho con CSS puro
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | tabla)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head > <meta http- equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Menú desplegable CSS puro, compatible con IE y FF</title> <style tipo="text/css"> cuerpo {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font- tamaño: 3em; alineación de texto: centro; familia de fuentes: georgia, "times new roman", serif;} #cabeza {altura: 145 px; borde: 0;} #posicionador {claro: ambos; posición: relativa; 1px; índice z: 100; } #ads {posición: relativa; índice z: 10;} .menu {display:none;} #noniemenu {posición:absoluta;} #noniemenu .holder ul {padding:0; :0;} #noniemenu .holder ul li {list-style-type: none;} #noniemenu .holder li {} #noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {display:bloque; posición:absoluta; izquierda:105px; margen superior:-20px; borde:1px sólido #000;} #noniemenu .holder .bold {font-weight:bold;} #noniemenu .holder { color:# fff; ancho: 104 px; alto: 18 px; margen derecho: 1 px; tamaño de fuente: 10 px; :auto; } #noniemenu a. exterior, #noniemenu a.outer:visited { color:#fff; width:104px; line-height:18px; display:block; decoración: ninguna; familia de fuentes: verdana, arial, sans-serif; } #noniemenu a.outer:hover { background:#697210; overflow:visible } #noniemenu div.open {display:none;} #noniemenu a. interior, #noniemenu a.inner: visitado { display:block; width:104px; height:18px; border-bottom:1px solid #000; #eee; text-align:center ; } #noniemenu a.segundo {font-weight:bold;} #noniemenu a.inner:hover { background:#add; ]> <tipo de estilo="texto /css"> cuerpo {margin-top:-8px;} #head {altura:147px;} #noniemenu {display:none;} .menu {display:block; position:absolute;} .menu a.outer, .menu a.outer:visited { color:#fff; ancho:104px; margen derecho:1px; -align:center; float:left; decoración de texto:ninguna; familia de fuentes: verdana, arial, sans-serif; tamaño de fuente:10px; altura de línea:18px; hover { fondo:#697210; desbordamiento: visible } .menu a.outer:hover table.first { display:block; border-collapse:collapse } .menu a.inner; :visitado {pantalla:bloque; ancho:102px; alto:18px; borde inferior:1px sólido #000;decoración de texto:ninguno;color:#000; :10px; alineación de texto:centro; } .menu a.inner:hover { fondo:#add; } .menu a.outer table.first a.segundo {altura de línea:18px; peso de fuente: negrita; } menú a.tabla exterior.primero a.segundo:desplazamiento { posición:relativa; desbordamiento:visible } .menú a.tabla exterior.primero a.segundo:tabla flotante { posición:superior absoluta; :-2px; izquierda:102px; colapso de borde:colapso; fondo:#eee; borde:1px sólido #000; lte IE 6]> <estilo> #ads {display:none;} #adsie {clear:both; text-align:center; margin-top:10px;} </style> <![endif]- -> </cabeza> <cuerpo > <div id="envoltorio"> <div id="cabeza"> <div id="posicionador"> <div clase="menú"> <a clase="exterior" href= "../menu/index. html">DEMOS <table class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="El cero página de anuncios en dólares">cero dólares</a> <a class="inner" href="../menu/embed.html" title="Ajustar texto alrededor de imágenes">Ajustar texto</a> <a class=" internal" href="../ menu/form.html" title="Estilizar formularios">formulario con estilo</a> <a class="inner" href="../menu/nodots.html" title="Eliminar bordes activos/enfoque">enfoque activo </a> <a class="inner second" href="../menu/hover_click.html" title="Pase el cursor/haga clic sin bordes activos/enfoque">PASAR/CLIC > <table><tr><td > <a class="inner" href="../menu/form.html" title="Estilo de formularios">formulario con estilo</a> <a class="inner" href= "../menu/nodots. html" title="Eliminar bordes activos/enfoque">enfoque activo</a> <a class="inner" href="../menu/hover_click.html" title="Hover/ hacer clic sin bordes activos/enfocados" >desplazar el cursor/hacer clic</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="Sombra paralela multiposición">cuadro de sombra</a> <a class="inner" href="../menu/old_master.html" title="Mapa de imagen para obtener información detallada">mapa de imagen</ a> <a class="inner " href="../menu/bodies.html" title="diversión con imágenes de fondo">fondos divertidos</a> <a class="inner" href="../menu /fade_scroll.html" title="desplazamiento de desvanecimiento">desplazamiento de desvanecimiento</a> <a class="inner" href="../menu/em_images.html" title="imágenes de tamaño em comparadas">tamaño de em imágenes</a> </td </tr></table> </a> <a class="outer" href="index.html">MENÚS <table class="first"><tr><td > <a class="inner" href="spies.html" title="una lista codificada de espías">menú de espías</a> <a class="inner" href="vertical.html" title="una horizontal menú vertical">menú vertical</ a> <a class="inner" href="expand.html" title="una lista desordenada que se amplía">lista que se amplía</a> <a class="inner" href="enlarge .html" title="una lista desordenada con imágenes de enlaces">imágenes de enlaces</a> <a class="inner" href="cross.html" title="enlaces no rectangulares">no rectangulares</a> <a class="inner" href ="jigsaw.html" title="enlaces rompecabezas">enlaces rompecabezas</a> <a class="inner" href="circles.html" title="enlaces circulares">enlaces circulares </a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">DISEÑOS <table class="first">< tr><td> <a class ="inner" href="../layouts/bodyfix.html" title="Diseño fijo para varios navegadores">Fijo 1</a> <a class="inner" href=". ./layouts/body2.html" title="Diseño fijo para varios navegadores">Fijo 2</a> <a class="inner" href="../layouts/body4.html" title="Diseño fijo para varios navegadores" >Fijo 3</a> < a class="inner" href="../layouts/body5.html" title="Diseño fijo para varios navegadores">Fijo 4</a> <a class="inner" href= "../layouts/minimum. html" title="Un diseño simple de ancho mínimo">ancho mínimo</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">CAJAS <table class="first"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="Izquierda barras de desplazamiento">desplazamiento hacia la izquierda</ a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a> <a class=" inside" href="../ boxes/snazzy.html" title="Bordes elegantes">bordes elegantes</a> <a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a > <a class="inner" href="../boxes/outside.html" title="Porcentaje MÁS píxeles">% MÁS píxeles</a> <a class="inner" href="../boxes/ minwidth.html" title="ancho mínimo para IE">ancho mínimo de IE</a> <a class="inner" href="../boxes/minheight.html" title ="altura mínima para IE" >altura mínima de IE</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index. html">MOZILLA <table class= "first"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="Un menú desplegable">menú desplegable< /a> <a class="inner" href="../mozilla/cascade.html" title="Un menú en cascada">menú en cascada</a> <a class="inner" href="../mozilla /content.html" title=" Usando contenido:">content:</a> <a class="inner" href="../mozilla/moxbox.html" title=":hover aplicado a un div">mozzie box</a> <a class ="inner" href="../mozilla/rainbow.html" title="Puedo construir un arcoíris">caja arcoíris</a> <a class="inner" href=" ../mozilla/snooker.html " title="Snooker cue">snooker cue</a> <a class="inner" href="../mozilla/target.html" title="Práctica de objetivo">práctica de objetivo </a> <a class= "inner" href="../mozilla/splittext.html" title="Títulos de dos tonos">títulos de dos tonos</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="Texto sombreado">texto sombreado</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">EXPLORADOR < table class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="Ejemplo uno">ejemplo uno< /a> <a class="inner" href="../ie/weft.html" title="Fuentes de trama">fuentes de trama</a> <a class="inner" href="../ie/ ejemplodos.html" title="Alineación vertical">alineación vertical</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">OPACIDAD <table class= "first"><tr><td> <a class="inner" href="../opacty/colores.html" title="rueda de colores">colores opacos</a> <a class="inner" href ="../opacty/picturemenu.html" title="un menú usando opacidad">menú opaco</a> <a class="inner" href="../opacty/png .html" title="opacidad parcial ">opacidad parcial</a> <a class="inner" href="../opacty/png2.html" title="opacidad parcial II">opacidad parcial II</a> </td></tr> </table> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">DEMOS</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="Los anuncios de cero dólares page">cero dólares</a ></li> <li><a class="inner" href="../menu/embed.html" title="Ajustar texto alrededor de imágenes">Ajustar texto</a> </li> <li>< a class="inner" href="../menu/form.html" title="Estilo de formularios">formulario con estilo</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="Eliminar bordes activos/enfoque">enfoque activo</a></li> <li><a class="inner second" href=". ./menu/hover_click.html" title="Pase el cursor/haga clic sin bordes activos/enfocados">Pase el cursor/haga clic >>a> <ul id="a3"> <li><a class="inner" href= "../menu/form. html" title="Formularios con estilo">formulario con estilo</a></li> <li><a class="inner" href="../menu/nodots.html" title ="Eliminar bordes activos/enfoque" >enfoque activo</a></li> <li><a class="inner" href="../menu/hover_click.html" title="Pasar el cursor/hacer clic sin activo /bordes de enfoque">colocar el cursor sobre/hacer clic </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="Multi -posición de sombra paralela">cuadro de sombras </a></li> <li><a class="inner" href="../menu/old_master.html" title="Mapa de imagen para obtener información detallada">mapa de imagen </a></li> <li><a class="inner" href="../menu/bodies.html" title="diversión con imágenes de fondo">fondos divertidos</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="desplazamiento con desvanecimiento">desplazamiento con desvanecimiento</a></li> <li><a class="inner" href="../menu/ em_images.html" title="imágenes de tamaño em comparadas">imágenes de tamaño em</a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "exterior" href="index.html">MENÚS</a></li> <li><a class="interior" href="spies.html" title="a codificado lista de espías">menú de espías</a></li> <li><a class="inner" href="vertical.html" title="un menú vertical horizontal">menú vertical</a></li > <li><a class= "inner" href="expand.html" title="una lista desordenada que se amplía">lista que se amplía</a></li> <li><a class="inner" href=" enlarge.html" title="una lista desordenada con imágenes de enlaces">imágenes de enlaces</a></li> <li><a class="inner" href="cross.html" title="enlaces no rectangulares" >no rectangular</a> </li> <li><a class="inner" href="jigsaw.html" title="enlaces de rompecabezas">enlaces de rompecabezas</a></li> <li>< a class="inner" href= "circles.html" title="enlaces circulares">enlaces circulares</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">DISEÑOS</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="Diseño fijo para varios navegadores">Fijo 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="Fijo para varios navegadores diseño">Fijo 2</a ></li> <li><a class="inner" href="../layouts/body4.html" title="Diseño fijo para varios navegadores">Fijo 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="Diseño fijo para varios navegadores">Fijo 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="Un diseño de ancho mínimo simple">ancho mínimo</a></li> </ul> </div> <div class=" titular"> <ul> <li ><a class="outer" href="../boxes/index.html">CAJAS</a></li> <li><a class="inner" href= "../boxes/scrollbars. html" title="Barras de desplazamiento izquierda">desplazamiento hacia la izquierda</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="Corrección flotante IE6 3px" >Corrección IE6 3px</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="Bordes elegantes">elegantes fronteras</a></li > <li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a></li> <li ><a class="inner" href="../boxes/outside.html" title="Porcentaje MÁS píxeles">% MÁS píxeles</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="ancho mínimo para IE">ancho mínimo de IE</a></li> <li><a class="inner" href="../boxes /minheight.html" title=" altura mínima para IE">altura mínima de IE</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="exterior" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="Un menú desplegable" >menú desplegable</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="Un menú en cascada"> menú en cascada</a></ li> <li><a class="inner" href="../mozilla/content.html" title="Uso de contenido:">contenido:</a></li> <li><a class="inner" href="../mozilla/moxbox.html" title=":hover aplicado a un div">cuadro mozzie</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="Puedo construir un arcoíris">caja arcoíris</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="Snooker cue">taco de billar</a></li> <li><a class="inner" href="../mozilla/target.html" title="Objetivo Práctica">práctica objetivo</a >>li> <li><a class="inner" href="../mozilla/splittext.html" title="Títulos de dos tonos">títulos de dos tonos</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="Texto sombreado">texto sombreado</a></li> </ul> </div > <div class="titular" > <ul> <li><a class="outer" href="../ie/index.html">EXPLORADOR</a></li> <li><a clase ="inner" href=". ./ie/exampleone.html" title="Ejemplo uno">ejemplo uno</a></li> <li><a class="inner" href="../ie /weft.html" title="Fuentes de trama">fuentes de trama</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="Alineación vertical" >alineación vertical</a>< /li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">OPACIDAD</a> </li> <li><a class="inner" href="../opacty/colores.html" title="rueda de colores">colores opacos</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="un menú usando opacidad">menú opaco</a></li> <li><a class=" inside" href="../ opacty/png.html" title="opacidad parcial">opacidad parcial</a></li> <li><a class="inner" href="../opacty/png2 .html" title="opacidad parcial II">opacidad parcial II</a></li> </ul> </div> </div> </div> </div> <!-- fin de la cabeza - -> <div id="info "> <h2>DIVERSIÓN DESPLEGABLE</h2> <h1>SIN JAVASCRIPT</h1> <h1>¡¡¡SOLO CSS!!!</h1> <h1 class="red">AHORA CON CASCADA</h1> </h1> div> </div> </body> </html>
