Exemplo de layout CSS: um bom menu de dois níveis CSS + JS

<DIVid=xcx_tabmenu>
<classe DIV=cx_tabmenu id=cx_tabmenu>
<DIV id=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Página inicial</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Empresa</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Produtos</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Nossos trabalhos</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">Notícias</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Loja</A> </DIV>
<BR style="CLEAR: esquerda">
<DIV id=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.downcodes.com/">Sobre nós</A> <A
href="http://www.downcodes.com/">O que fazemos?</A> <A
href="http://www.downcodes.com/">Conheça a equipe</A> <A
href="http://www.downcodes.com/">Por que trabalhar conosco?</A> <A
href="http://www.downcodes.com/">Política de qualidade</A> <A
href="http://www.downcodes.com/">Termos</A> <A
href="http://www.downcodes.com/">Depoimentos</A> <A
href="http://www.downcodes.com/">Clexus Tour</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">Clexus Privado
Mensagens</A> <A href="#">Imagem
Galeria</A> <A href="#">Cliente
Gestão</A> <A
href="#">Modelo
Funciona</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">Web
Projeto</A> <A
href="#">Web
Desenvolvimento</A> <A
href="#">Logotipo
Projeto</A> <A
href="#">Imprimir
Projeto</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">Notícias Clexus</A>
<A href="#">Joomla
Notícias</A> <A
href="#">Notícias Gerais</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

corpo{text-align:center}
.cx_tabmenu{
PADDING-TOP: 2px; COR DE FUNDO: #474747;LARGURA: 790px;
}
#ddimagetabs {
PADDING-ESQUERDA: 10px
}
#ddimagetabs A {
PADDING-RIGHT: 20px; BORDER-TOP: #666666 1px sólido; DISPLAY: PADDING-LEFT: 20px; MARGIN-RIGHT: 2px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif: 33px;
}
#ddimagetabs A:hover {
BORDER-TOP: #ffffff 1px sólido; FUNDO: url(../images/cx_menu_hover.jpg) #363636 sem repetição central inferior;
}
#ddimagetabs A.atual {
BORDER-TOP: #ffffff 1px sólido; FUNDO: url(../images/cx_menu_hover.jpg) #363636 sem repetição central inferior;
}
A.sclink:link {

}
A.sclink:visitou {

}
A.sclink:hover {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
BORDA SUPERIOR: #ff9900 1px sólido
}
#ddimagetabs .atual#sclink1 {
BORDA SUPERIOR: #ff9900 1px sólido
}
#sc1 A:link {

}
#sc1 R:visitou {

}
#sc1 A: passar o mouse {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
BORDA SUPERIOR: #990099 1px sólido
}
#ddimagetabs .atual#sclink2 {
BORDA SUPERIOR: #990099 1px sólido
}
#sc2 R:link {

}
#sc2 R:visitou {

}
#sc2 A:hover {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
BORDA SUPERIOR: #0099cc 1px sólido
}
#ddimagetabs .atual#sclink3 {
BORDA SUPERIOR: #0099cc 1px sólido
}
#sc3 A:link {

}
#sc3 R:visitou {

}
#sc3 A:hover {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
BORDA SUPERIOR: #78ba00 1px sólido
}
#ddimagetabs .atual#sclink4 {
BORDA SUPERIOR: #78ba00 1px sólido
}
#sc4 R:link {

}
#sc4 R:visitou {

}
#sc4 A:hover {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
BORDA SUPERIOR: #99cccc 1px sólido
}
#ddimagetabs .atual#sclink5 {
BORDA SUPERIOR: #99cccc 1px sólido
}
#sc5 R:link {

}
#sc5 R:visitou {

}
#sc5 A: passar o mouse {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
BORDA SUPERIOR: #999999 1px sólido
}
#ddimagetabs .atual#sclink6 {
BORDA SUPERIOR: #999999 1px sólido
}
#sc6 R:link {

}
#sc6 R:visitou {

}
#sc6 A:hover {

}
#ddimagetabs #sclink7 {
PADDING-RIGHT: 30px; BORDER-TOP: #ff0000 1px sólido; PADDING-LEFT: 30px;
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px sólido FUNDO: url(../images/cx_menu_hover_my.jpg) #cf1919 sem repetição central inferior
}
#ddimagetabs .atual#sclink7 {
BORDER-TOP: #ef7777 1px sólido FUNDO: url(../images/cx_menu_hover_my.jpg) #cf1919 sem repetição central inferior
}
#sc7 R:link {

}
#sc7 R:visitou {

}
#sc7 A:hover {

}
#tabcontentcontainer {
FUNDO: url(../images/sub_menu_bg.jpg) #fcfcfa repetir-x;
}
.tabcontent{
EXIBIÇÃO: nenhum; PADDING-TOP: 4px
}
.tabcontent A: link {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; FAMÍLIA DE FONTE: Verdana, Arial, Helvetica, sans-serif; ALTURA: 18px; DECORAÇÃO DE TEXTO: nenhuma;
}
.tabcontent A:visitou {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; FAMÍLIA DE FONTE: Verdana, Arial, Helvetica, sans-serif; ALTURA: 18px; DECORAÇÃO DE TEXTO: nenhuma;
}
.tabcontent A:hover {
FUNDO: url(../images/cx_submenu_hover_grey.jpg) sem repetição central inferior COR: #000000;
}
#active_submenu {
FUNDO: url(../images/cx_submenu_hover.jpg) #666666 sem repetição central inferior COR: #fff;
}