Exemple de mise en page CSS : un bon menu CSS+JS à deux niveaux

<IDIV=xcx_tabmenu>
<classe DIV=cx_tabmenu id=cx_tabmenu>
<identifiant DIV=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Accueil</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Société</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Produits</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Nos travaux</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">Actualités</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Boutique</A> </DIV>
<BR style="CLEAR : gauche">
<identifiant DIV=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.downcodes.com/">À propos de nous</A> <A
href="http://www.downcodes.com/">Que faisons-nous ?</A> <A
href="http://www.downcodes.com/">Rencontrez l'équipe</A> <A
href="http://www.downcodes.com/">Pourquoi travailler avec nous ?</A> <A
href="http://www.downcodes.com/">Politique de qualité</A> <A
href="http://www.downcodes.com/">Conditions</A> <A
href="http://www.downcodes.com/">Témoignages</A> <A
href="http://www.downcodes.com/">Visite du Lexus</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">Clexus Privé
Messagerie</A> <A href="#">Image
Galerie</A> <A href="#">Client
Gestion</A> <A
href="#">Modèle
Travaux</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">Web
Conception</A> <A
href="#">Web
Développement</A> <A
href="#">Logo
Conception</A> <A
href="#">Imprimer
Conception</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">Actualités Lexus</A>
<A href="#">Joomla
Actualités</A> <A
href="#">Actualités générales</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

corps{text-align:center}
.cx_tabmenu {
REMBOURRAGE-HAUT : 2 px ; COULEUR DE FOND : #474747 ; LARGEUR : 790 px ;
}
#ddimagetabs {
REMBOURRAGE-GAUCHE : 10 px
}
#ddimagetabs A {
REMPLISSAGE À DROITE : 20 px ; BORDURE EN HAUT : #666666 1 px solide ; AFFICHAGE : en ligne ; REMPLISSAGE À GAUCHE : 20 px ; ARRIÈRE-PLAN : #363636 ; 2px ; PADDING-TOP : 0px ; FONT-FAMILY : Verdana, Arial, Helvetica, sans-serif ; HAUTEUR : 33px ;
}
#ddimagetabs A: survolez {
BORDURE-HAUT : #ffffff 1px solide ; FOND : url(../images/cx_menu_hover.jpg) #363636 bas central sans répétition ;
}
#ddimagetabs A.courant {
BORDURE-HAUT : #ffffff 1px solide ; FOND : url(../images/cx_menu_hover.jpg) #363636 bas central sans répétition ;
}
A.sclink:lien {

}
A.sclink : visité {

}
A.sclink : survoler {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1: survoler {
BORDURE-HAUT : #ff9900 1px solide
}
#ddimagetabs .current#sclink1 {
BORDURE-HAUT : #ff9900 1px solide
}
#sc1 A:lien {

}
#sc1 A : visité {

}
#sc1 A : survolez {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2: survolez {
BORDURE-HAUT : #990099 1px solide
}
#ddimagetabs .current#sclink2 {
BORDURE-HAUT : #990099 1px solide
}
#sc2 A:lien {

}
#sc2 A:visité {

}
#sc2 A : survolez {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3: survolez {
BORDURE-HAUT : #0099cc 1px solide
}
#ddimagetabs .current#sclink3 {
BORDURE-HAUT : #0099cc 1px solide
}
#sc3 A:lien {

}
#sc3 A : visité {

}
#sc3 A : survolez {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4: survolez {
BORDURE-HAUT : #78ba00 1px solide
}
#ddimagetabs .current#sclink4 {
BORDURE-HAUT : #78ba00 1px solide
}
#sc4 A:lien {

}
#sc4 A:visité {

}
#sc4 A : survolez {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5: survolez {
BORDURE-HAUT : #99cccc 1px solide
}
#ddimagetabs .current#sclink5 {
BORDURE-HAUT : #99cccc 1px solide
}
#sc5 A:lien {

}
#sc5 A : visité {

}
#sc5 A : survolez {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6: survolez {
BORDURE-HAUT : #999999 1px solide
}
#ddimagetabs .current#sclink6 {
BORDURE-HAUT : #999999 1px solide
}
#sc6 A:lien {

}
#sc6 A : visité {

}
#sc6 A : survolez {

}
#ddimagetabs #sclink7 {
REMBOURRAGE-DROITE : 30px ; BORDURE-HAUT : #ff0000 1px solide ; REMBOURRAGE-GAUCHE : 30px ; MARGE-GAUCHE : 100px ;
}
#ddimagetabs #sclink7: survolez {
BORDURE-TOP : #ef7777 1px solide ; FOND : url(../images/cx_menu_hover_my.jpg) #cf1919 bas central sans répétition
}
#ddimagetabs .current#sclink7 {
BORDURE-TOP : #ef7777 1px solide ; FOND : url(../images/cx_menu_hover_my.jpg) #cf1919 bas central sans répétition
}
#sc7 A:lien {

}
#sc7 A:visité {

}
#sc7 A : survolez {

}
#tabcontentconteneur {
FOND : url(../images/sub_menu_bg.jpg) #fcfcfa répéter-x LARGEUR : 790px HAUTEUR : 27px ;
}
.tabcontent {
AFFICHAGE : aucun ; PADDING-TOP : 4px
}
.tabcontent A:lien {
PADDING-DROITE : 10px ; PADDING-LEFT : 10px ; FAMILLE DE POLICE : Verdana, Arial, Helvetica, sans empattement ; HAUTEUR : 18 px DÉCORATION : aucune ;
}
.tabcontent A: visité {
PADDING-DROITE : 10px ; PADDING-LEFT : 10px ; FAMILLE DE POLICE : Verdana, Arial, Helvetica, sans empattement ; HAUTEUR : 18 px DÉCORATION : aucune ;
}
.tabcontent A: survoler {
FOND : url(../images/cx_submenu_hover_grey.jpg) en bas au centre sans répétition ; #000000 ;
}
#active_submenu {
FOND : url(../images/cx_submenu_hover.jpg) #666666 bas central sans répétition ; COULEUR : #fff
}