Pues bien, empecemos:
Lo primero que tenemos que saber es que tendremos 3 archivos, uno en XHTML, que dará la estructura a nuestro menú, otro en CSS con el que definiremos los estilos, y por último uno de JavaScript, el cual no sé como funciona y por eso no tocaremos.
XHTML, BREVE EXPLICACIÓN:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>menu_despegable</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="efecto.css" rel="stylesheet" type="text/css" /> /*CON ESTA LÍNEA ESTAMOS LINKANDO LA HOJA DE ESTILOS CON LA QUE DAMOS EL ESTILO DE NUESTRO MENU*/ <script type="text/javascript" src="efecto.js"></script> /*CON ESTA LÍNEA ESTAMOS LINKANDO EL ARCHIVO DE JAVASCRIPT QUE NOS PERMITE QUE EL SISTEMA FUNCIONE*/ </head> <body> <ul> /*CON ESTA LÍNEA EMPEZAMOS A CREAR NUESTRO MENÚ, ACTÚA COMO UN CONTENEDOR DE TODAS LAS OPCIONES QUE PONDREMOS. TENED EN CUENTA QUE TAN SÓLO ESTAMOS ABRIENDO UNA ETIQUETA, PERO AÚN NO LA ESTAMOS CERRANDO*/ <li><a>opcion</a></li> /*CON ESTA LÍNEA LO QUE HACEMOS ES CREAR UNA OPCIÓN, PODREMOS PONER TANTAS COMO QUERAMOS, LA ETIQUETA SE CIERRA Y SE ABRE EN LA MISMA LÍNEA*/ <li><a>opciones</a> /*EN ESTA LÍNEA ESTAMOS CREANDO OTRA OPCIÓN, PERO TAMBIÉN VAMOS A CREAR UN SUBMENÚ, POR TANTO, AL IGUAL QUE EN LA PRIMERA, DEJAMOS LA ETIQUETA ABIERTA*/ <ul> /*EN ESTA LÍNEA ESTAMOS CREANDO EL SUSODICHO SUBMENÚ, Y COMO EN EL PRIMER APARTADO, DEJAMOS LA ETIQUTA ABIERTA PARA INTRODUCIR LAS OPCIONES*/ <li><a>subopcion</a></li> /*AL IGUAL QUE EN EL MENÚ PRINCIPAL, AQUÍ CREAMOS LAS OPCIONES*/ <li><a>subopcion</a></li> <li><a>subopcion</a></li> </ul> /*CERRAMOS EL SUBMENÚ*/ </li> /*CERRAMOS LA OPCIÓN QUE ABRE EL SUBMENÚ*/ <li><a>opcion</a></li> /*ESTA ES UNA OPCIÓN MÁS DEL MENÚ PRINCIPAL*/ <li><a>opcion</a></li> /*ESTA ES UNA OPCIÓN MÁS DEL MENÚ PRINCIPAL*/ <li><a>opcion</a></li> /*ESTA ES UNA OPCIÓN MÁS DEL MENÚ PRINCIPAL*/ </ul> /*CERRAMOS EL MENÚ PRINCIPAL*/ </body> </html>
CSS, BREVE EXPLICACIÓN:
Código :
BODY{font-family:Verdana, Arial, Helvetica, sans-serif;} /*ESTA LÍNEA TAN SÓLO LA HE PUESTO PARA CAMBIAR EL ESTILO DE LAS FUENTES, NO LE HAREMOS CASO...*/
ul {
margin:0; /*AQUÍ DECIDIMOS QUE EL MENÚ TENGA UN MARGEN IGUAL A CERO CON LOS ELEMENTOS QUE TENGA ALREDEDOR*/
padding:0; /*AQUÍ DECIDIMOS QUE EL MENÚ TENGA UN MARGEN IGUAL A CERO CON LOS ELEMENTOS QUE TENGA EN SU INTERIOR*/
list-style:none; /*AQUÍ DECIDIMOS QUE EL MENÚ NO TENGA ASPECTO DE LISTA*/
}
li {
float: left; /*AQUÍ ALINEAMOS LAS OPCIONES A LA IZQUIERDA, LAS OTRAS DOSLINEAS SUPONGO QUE SE ENTIENDEN, SI NO LAS COPIAN Y PUNTO 
*/
position: relative;
margin:0;
}
li a {
display:block;
color: #666;
text-decoration:none;
padding:5px 0 0 0;
width:120px; /*MEDIDAS QUE QUERAMOS QUE TENGA CADA "CASILLA" DE OPCION*/
height:25px;
text-align:center;
font-size:11px;
font-weight:bold;
background-color:#CCFF00; /*AQUÍ PODEMOS DEFINIR LAS OPCIONES DEL FONDO DE LAS OPCIONES, IGUAL QUE HE DEFINIDO EL COLOR, PODEMOS PONER UNA IMÁGEN...*/
}
li a:hover { /*AQUÍ LO QUE HACEMOS ES LO MISMO QUE EN EL APARTADO ANTERIOR, SOLO QUE EN ESTA OCASIÓN DEFINIMOS LOS ESTILOS PARA QUE CAMBIE EL ASPECTO CUANDO TENGAMOS EL RATON ENCIMA DE LA OPCION*/
color:#777;
text-decoration:none;
font-weight:bold;
width:120px;
height:25px;
background-color:#FFCC00;
}
li ul { /*AQUÍ DEFINIREMOS VAROS PARÁMETROS DE LOS SUBMENÚS, EN CONCRETO DE LA APERTURA, QUE NO SE DEBE VER EN PRINCIPIO, Y POR ESO PONEMOS DISPLAY:NONE*/
display:none;
position: absolute;
left:0;
}
li>ul { /*LAS POSICIONES DE LAS OPCIONES DEL SUBMENU*/
top:auto;
left:auto;
}
li:hover ul, li.over ul {
display:block; /*FORMA EN LA QUE QUEREMOS QUE SALGA EL SUBMENU*/
}Como ya he dicho, no voy a explicar el JavaScript porque no sé cómo funciona.
Esto no es un tutorial ni mucho menos, siento no haber podido explicarlo mejor, pero de todas formas aquí os lo dejo por si le sirve a álguien,ok?? Bueno, para terminar podéis ver el ejemplo aquí
Saludos y suerte!!
