Beispiel für ein CSS-Layout: ein gutes zweistufiges CSS+JS-Menü

<DIV id=xcx_tabmenu>
<DIV class=cx_tabmenu id=cx_tabmenu>
<DIV id=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Startseite</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Unternehmen</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Produkte</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Unsere Werke</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">Neuigkeiten</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Store</A> </DIV>
<BR style="CLEAR: left">
<DIV id=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.downcodes.com/">Über uns</A> <A
href="http://www.downcodes.com/">Was machen wir?</A> <A
href="http://www.downcodes.com/">Treffen Sie das Team</A> <A
href="http://www.downcodes.com/">Warum mit uns arbeiten?</A> <A
href="http://www.downcodes.com/">Qualitätsrichtlinie</A> <A
href="http://www.downcodes.com/">Bedingungen</A> <A
href="http://www.downcodes.com/">Erfahrungsberichte</A> <A
href="http://www.downcodes.com/">Clexus-Tour</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">Clexus Private
Nachrichten</A> <A href="#">Bild
Galerie</A> <A href="#">Kunde
Management</A> <A
href="#">Vorlage
Funktioniert</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">Web
Design</A> <A
href="#">Web
Entwicklung</A> <A
href="#">Logo
Design</A> <A
href="#">Drucken
Design</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">Clexus-Neuigkeiten</A>
<A href="#">Joomla
Neuigkeiten</A> <A
href="#">Allgemeine Neuigkeiten</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

Körper{text-align:center}
.cx_tabmenu {
PADDING-TOP: 2px; HINTERGRUNDFARBE: #474747;BREITE: 790px;
}
#ddimagetabs {
PADDING-LINKS: 10px
}
#ddimagetabs A {
PADDING-RIGHT: 20px; RAND-TOP: 12px; FONT-SIZE: 33px; 2px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Sans-Serif; TEXT-ALIGN: keine
}
#ddimagetabs A:hover {
BORDER-TOP: #ffffff 1px einfarbig; HINTERGRUND: url(../images/cx_menu_hover.jpg) #363636 keine Wiederholung, Mitte unten;
}
#ddimagetabs A.current {
BORDER-TOP: #ffffff 1px einfarbig; HINTERGRUND: url(../images/cx_menu_hover.jpg) #363636 keine Wiederholung, Mitte unten;
}
A.sclink:link {

}
A.sclink:besucht {

}
A.sclink:hover {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
BORDER-TOP: #ff9900 1 Pixel durchgehend
}
#ddimagetabs .current#sclink1 {
BORDER-TOP: #ff9900 1 Pixel durchgehend
}
#sc1 A:link {

}
#sc1 A:besucht {

}
#sc1 A:hover {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
BORDER-TOP: #990099 1 Pixel durchgehend
}
#ddimagetabs .current#sclink2 {
BORDER-TOP: #990099 1 Pixel durchgehend
}
#sc2 A:link {

}
#sc2 A:besucht {

}
#sc2 A:hover {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
BORDER-TOP: #0099cc 1px einfarbig
}
#ddimagetabs .current#sclink3 {
BORDER-TOP: #0099cc 1px einfarbig
}
#sc3 A:link {

}
#sc3 A:besucht {

}
#sc3 A:hover {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
BORDER-TOP: #78ba00 1px durchgehend
}
#ddimagetabs .current#sclink4 {
BORDER-TOP: #78ba00 1px durchgehend
}
#sc4 A:link {

}
#sc4 A:besucht {

}
#sc4 A:hover {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
BORDER-TOP: #99cccc 1px einfarbig
}
#ddimagetabs .current#sclink5 {
BORDER-TOP: #99cccc 1px einfarbig
}
#sc5 A:link {

}
#sc5 A:besucht {

}
#sc5 A:hover {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
BORDER-TOP: #999999 1 Pixel durchgehend
}
#ddimagetabs .current#sclink6 {
BORDER-TOP: #999999 1 Pixel durchgehend
}
#sc6 A:link {

}
#sc6 A:besucht {

}
#sc6 A:schweben {

}
#ddimagetabs #sclink7 {
PADDING-RIGHT: 30px; RAND-TOP: #ff0000 1px; BACKGROUND: 100px;
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px einfarbig; HINTERGRUND: url(../images/cx_menu_hover_my.jpg) #cf1919 keine Wiederholung in der Mitte unten
}
#ddimagetabs .current#sclink7 {
BORDER-TOP: #ef7777 1px einfarbig; HINTERGRUND: url(../images/cx_menu_hover_my.jpg) #cf1919 keine Wiederholung in der Mitte unten
}
#sc7 A:link {

}
#sc7 A:besucht {

}
#sc7 A:schweben {

}
#tabcontentcontainer {
HINTERGRUND: url(../images/sub_menu_bg.jpg) #fcfcfa wiederholen-x; BREITE: 790px; HÖHE: 27px;
}
.tabcontent {
ANZEIGE: keine; PADDING-TOP: 4px
}
.tabcontent A:link {
PADDING-RIGHT: 10px; PADDING-BOTTOM: 3px; PADDING-TOP: 0px; SCHRIFTFAMILIE: Verdana, Arial, Helvetica, serifenlos; TEXTDEKORATION: keine
}
.tabcontent A:besucht {
PADDING-RIGHT: 10px; PADDING-BOTTOM: 3px; PADDING-TOP: 0px; SCHRIFTFAMILIE: Verdana, Arial, Helvetica, serifenlos; TEXTDEKORATION: keine
}
.tabcontent A:hover {
HINTERGRUND: url(../images/cx_submenu_hover_grey.jpg) keine Wiederholung, Mitte unten; FARBE: #000000
}
#active_submenu {
HINTERGRUND: url(../images/cx_submenu_hover.jpg) #666666 keine Wiederholung in der Mitte unten; FARBE: #fff
}