Ejemplo de diseño CSS: un buen menú de dos niveles CSS+JS

<DIV id=xcx_tabmenu>
<DIV clase=cx_tabmenu id=cx_tabmenu>
<DIV id=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Inicio</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Empresa</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Productos</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Nuestros trabajos</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">Noticias</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Tienda</A> </DIV>
<BR estilo="CLEAR: izquierda">
<DIV id=contenedor de contenido de pestaña>
<DIV clase=tabcontent id=sc1></DIV>
<DIV clase=tabcontent id=sc2><A
href="http://www.downcodes.com/">Acerca de nosotros</A> <A
href="http://www.downcodes.com/">¿Qué hacemos?</A> <A
href="http://www.downcodes.com/">Conozca al equipo</A> <A
href="http://www.downcodes.com/">¿Por qué trabajar con nosotros?</A> <A
href="http://www.downcodes.com/">Política de calidad</A> <A
href="http://www.downcodes.com/">Términos</A> <A
href="http://www.downcodes.com/">Testimonios</A> <A
href="http://www.downcodes.com/">Recorrido por Clexus</A> </DIV>
<DIV clase=tabcontent id=sc3><A
href="#">Clexus Privado
Mensajería</A> <A href="#">Imagen
Galería</A> <A href="#">Cliente
Gestión</A> <A
href="#">Plantilla
Funciona</A> </DIV>
<DIV clase=tabcontent id=sc4><A
href="#">Web
Diseño</A> <A
href="#">Web
Desarrollo</A> <A
href="#">Logotipo
Diseño</A> <A
href="#">Imprimir
Diseño</A> </DIV>
<DIV clase=tabcontent id=sc5><A
href="#">Noticias de Clexus</A>
<A href="#">Joomla
Noticias</A> <A
href="#">Noticias generales</A>
</DIV>
<DIV clase=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

cuerpo {text-align: center}
.cx_tabmenu {
RELLENO SUPERIOR: 2 px; COLOR DE FONDO: #474747; ANCHO: 790 px;
}
#ddimagetabs {
RELLENO IZQUIERDO: 10px
}
#ddimagetabs A {
PADDING-RIGHT: 20px; BORDE-TOP: #666666 1px sólido; FLOAT: LINE-HEIGHT: 33px; 2px; PADDING-TOP: 0px; FAMILIA DE FUENTES: Verdana, Arial, Helvetica, sans-serif; ALTURA: 33px; ALINEACIÓN DE TEXTO: centro;
}
#ddimagetabs A: pasar el cursor {
BORDE SUPERIOR: #ffffff 1px sólido; FONDO: url(../images/cx_menu_hover.jpg) #363636 parte inferior central sin repetición;
}
#ddimagetabs A.actual {
BORDE SUPERIOR: #ffffff 1px sólido; FONDO: url(../images/cx_menu_hover.jpg) #363636 parte inferior central sin repetición;
}
A.sclink:enlace {

}
A.sclink:visitado {

}
A.sclink: flotar {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1: pasar el cursor {
BORDE SUPERIOR: #ff9900 1px sólido
}
#ddimagetabs .current#sclink1 {
BORDE SUPERIOR: #ff9900 1px sólido
}
#sc1 A: enlace {

}
#sc1 A:visitado {

}
#sc1 A: flotar {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2: pasar el cursor {
BORDE SUPERIOR: #990099 1px sólido
}
#ddimagetabs .current#sclink2 {
BORDE SUPERIOR: #990099 1px sólido
}
#sc2 A: enlace {

}
#sc2 A:visitado {

}
#sc2 A: flotar {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3: pasar el cursor {
BORDE SUPERIOR: #0099cc 1px sólido
}
#ddimagetabs .current#sclink3 {
BORDE SUPERIOR: #0099cc 1px sólido
}
#sc3 A: enlace {

}
#sc3 A:visitado {

}
#sc3 A: flotar {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4: pasar el cursor {
BORDE SUPERIOR: #78ba00 1px sólido
}
#ddimagetabs .current#sclink4 {
BORDE SUPERIOR: #78ba00 1px sólido
}
#sc4 A: enlace {

}
#sc4 A:visitado {

}
#sc4 A: flotar {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5: pasar el cursor {
BORDE SUPERIOR: #99cccc 1px sólido
}
#ddimagetabs .current#sclink5 {
BORDE SUPERIOR: #99cccc 1px sólido
}
#sc5 A: enlace {

}
#sc5 A:visitado {

}
#sc5 A: flotar {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6: pasar el cursor {
BORDE SUPERIOR: #999999 1px sólido
}
#ddimagetabs .current#sclink6 {
BORDE SUPERIOR: #999999 1px sólido
}
#sc6 A: enlace {

}
#sc6 A:visitado {

}
#sc6 A: flotar {

}
#ddimagetabs #sclink7 {
RELLENO DERECHO: 30 px; BORDE SUPERIOR: #ff0000 1 px sólido; RELLENO IZQUIERDO: 30 px;
}
#ddimagetabs #sclink7: pasar el cursor {
BORDE SUPERIOR: #ef7777 1px sólido; FONDO: url(../images/cx_menu_hover_my.jpg) #cf1919 parte inferior central sin repetición
}
#ddimagetabs .current#sclink7 {
BORDE SUPERIOR: #ef7777 1px sólido; FONDO: url(../images/cx_menu_hover_my.jpg) #cf1919 parte inferior central sin repetición
}
#sc7 A: enlace {

}
#sc7 A:visitado {

}
#sc7 A: flotar {

}
#tabcontentcontainer {
FONDO: url(../images/sub_menu_bg.jpg) #fcfcfa repetir-x; ANCHO: 790px ALTO: 27px;
}
.tabcontent {
PANTALLA: ninguna; PADDING-TOP: 4px
}
.tabcontent A: enlace {
RELLENO-DERECHA: 10px; RELLENO-IZQUIERDO: 10px; TAMAÑO DE FUENTE: 11px; ALTURA DE LÍNEA: 18px; FAMILIA DE FUENTES: Verdana, Arial, Helvetica, sans-serif ALTURA: 18px; DECORACIÓN DE TEXTO: ninguna;
}
.tabcontent A:visitado {
RELLENO-DERECHA: 10px; RELLENO-IZQUIERDO: 10px; TAMAÑO DE FUENTE: 11px; ALTURA DE LÍNEA: 18px; FAMILIA DE FUENTES: Verdana, Arial, Helvetica, sans-serif ALTURA: 18px; DECORACIÓN DE TEXTO: ninguna;
}
.tabcontent A: flotar {
FONDO: url(../images/cx_submenu_hover_grey.jpg) parte inferior central sin repetición COLOR: #000000
}
#submenú_activo {
FONDO: url(../images/cx_submenu_hover.jpg) #666666 parte inferior central sin repetición COLOR: #fff
}