Utilice CSS para crear menús de varios niveles
lt! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Strict . DTD " gt
lthtml xmlns = "http://www.w3.org/1999/XHTML" gt;
lthead gt
ltmeta http-equiv = "Tipo de contenido" Contenido = " text/html; charset=GB2312" />
ltmeta name = " robots " content = " all "/ gt;
lttitle gtEl menú desplegable CSS puro admite IE6IE7Firefox
ltstyle type="text/css "
* {margen: 0; relleno: 0;}
Texto {
Fondo: # fff
Familia de fuentes: "Lucida Grande", Helvetica, Arial, sans serif;
tamaño de fuente: 12px;
}
/*Define el ancho de los estilos y otros estilos*/
. menu { font-size: 12px; bottom: 5px width: 750px margin: 0 auto }
/* Conozca el relleno, los márgenes y los estilos predeterminados para las listas */
. Menú ul { relleno: 0; margen: 0; tipo de estilo de lista: ninguno; altura: 3em fondo: transparente }
. Menu ul ul { width: 7em; }
/*Defina la propiedad flotante para permitirle definir la posición del siguiente menú*/
. Menú ul Li { float: izquierda; altura: 3em altura de línea: 3em pantalla: bloque }
/*Estilo de menú secundario*/
. Menú ul ul li {Pantalla: ancho de bloque: 7em alto: automático; alto de línea: 1em;}
/*Estilo predeterminado del menú de primer nivel*/
. Menú a,. menú a: visitado { pantalla: bloque; flotante: izquierda; ancho: 7em tamaño de fuente: 1em; texto-
decoración: ninguno; color: #fff fondo: #949e7c ; border-left: 1px solid # eee; border-right: 1px solid # 000; }
/* Hackea la definición de IE5.x y el ancho del menú para poder obtener o establecer el ancho actual */
*html. menú,*html. Menú a: Visitado {width: 7em; text-decoration: none;}
/*Estilo de apariencia predeterminado de los enlaces del siguiente nivel*/
. Menú ul ul a,. menú ul ul a: visitado
{display: block; background: #5b8686
color: #fff ancho: 7em alto: 100 alto de línea: 1em; ; border-bottom: 1px solid # 7aa;}
/*Definir el ancho del menú de nivel inferior*/
* html.
Menú ul ul a, * html. Menú ul ul a: Visitado { ancho: 7em; }
/*Defina el estilo de formación de la tabla en IE6*/
. Tabla de menú { borde-colapso: colapso; relleno: 0; margen: -1px; ancho: 0; tamaño de fuente: 1em; }
/* Menú secundario */
/*Estilo de enlace de nivel*/
* html. Menú a: hover {color: # 0066 ff; posición: relativa; índice z: 100;
/**/
. Menú Lee: Coloca el cursor sobre {Posición: relativa;}
/**/
. menú: pase el cursor sobre { color: #ff0; fondo: #d4d8bd;}
/*Estilos de enlace secundario*/
* html. Menú ul ul a: hover { color: # ff 0000; fondo: # 7aa posición: relativa; z index: 110 }
/* Busque la posición del menú secundario y configúrelo en el main Se muestra en la parte inferior del menú. Si es absoluto, puedes probar */
. Menú ul ul li: coloque el cursor sobre {posición: relativa;}
. menú ul ul: pase el cursor sobre {color: # fff; fondo: # 7aa}
. menu ul ul {visibilidad: oculto; posición: absoluta; altura: 0; arriba: 3em; izquierda: 0; ancho: 8em}
/* Ir al primer nivel para definir si se muestra el siguiente menú. Si está visible: visible; cambie a visibilidad: oculto; luego menús por encima del nivel 2*/
.
menú ul:hover ul {visibilidad: visible; altura: auto; relleno: 0 3em 3em 3em izquierda: -3em }
lt/style gt;
ltbody gt
ltdiv class="menu " >
ltul gt
lt李gt lta href = " # " gt hotel página de inicio
lt! -[IF LTE IE 6]> lt tabla gt lttr gt lttd gt lt! [endif]- gt；
ltul gt
lt李gt ltA href="#" title= "Ambiente hotelero" >Ambiente hotelero
lt李gt ltA href="#" title= "Historial del hotel" >Historial del hotel
lt/ul gt;
lt! - [SI LTE IE 6]> lt/TD gt lt/tr gt lt/table gt lt/a gt lt! [endif]- gt;
lt/李 gt
lt李 gt lta href = " # " gtReserva un hotel
lt! -[IF LTE IE 6]> lt tabla gt lttr gt lttd gt lt! [endif]- gt;
ltul gt
lt李gt ltA href="#" title= "Consulta de habitación" >Consulta de habitación
lt李gt ltA href="#" title= "Agregar información de la habitación" >Agregar información de la habitación
lt/ul gt;
lt! - [SI LTE IE 6]> lt/TD gt lt/tr gt lt/table gt lt/a gt lt! [endif]- gt;
lt/李 gt
lt李 gt lta href = " # " gtGestión empresarial
lt! -[IF LTE IE 6]> lt tabla gt lttr gt lttd gt lt! [endif]- gt;
ltul gt
lt李gt ltA href="#" title= "Mover" >Mover
lt李gt ltA href ="#" title= "Revisar la habitación" >Revisar la habitación
lt/ul gt;
lt! - [SI LTE IE 6]> lt/TD gt lt/tr gt lt/table gt lt/a gt lt! [endif]- gt;
lt/李 gt
lt李 gt lta href = " # " gt Hotel Forum
lt! -[IF LTE IE 6]> lt tabla gt lttr gt lttd gt lt! [endif]- gt;
ltul gt
lt李gt ltA href="#" title= "Mi foro" >Mi foro
lt /ul gt;
lt! -[si LTE IE 6]>lt/TD gt;lt/tr gt;lt
/table gt;lt/a gt;lt! [endif]- gt;
lt/李 gt
lt李 gt lta href = " # " gtMensaje de invitado
lt! -[IF LTE IE 6]> lt tabla gt lttr gt lttd gt lt! [endif]- gt;
ltul gt
lt李gt ltA href="#" title= "Mi mensaje" >Mi mensaje
lt /ul gt;
lt! - [SI LTE IE 6]> lt/TD gt lt/tr gt lt/table gt lt/a gt lt! [endif]- gt;
lt/李 gt
lt李 gt lta href = " # " gtActividades de hoy
lt! -[IF LTE IE 6]> lt tabla gt lttr gt lttd gt lt! [endif]- gt；
ltul gt
lt李gt lta href="#" title="rueda de colores " >Puntos de usuario
lt/ul gt;
lt! - [SI LTE IE 6]> lt/TD gt lt/tr gt lt/table gt lt/a gt lt! [endif]- gt;
lt/李gt
lt/ul gt;
lt/div gt;
lt/ body gt;
lt/html gt;
Espero que pueda ayudarte. .
Alianza de Estándares de Red