Contoh tata letak CSS: menu dua tingkat CSS+JS yang bagus

<ID DIV=xcx_tabmenu>
<Kelas DIV=cx_tabmenu id=cx_tabmenu>
<ID DIV=ddimagetab>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Beranda</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Perusahaan</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Produk</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Pekerjaan Kami</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">Berita</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Toko</A> </DIV>
<BR style="JELAS: kiri">
<IDDIV=tabkontenkontainer>
<Kelas DIV=tabkonten id=sc1></DIV>
<Kelas DIV=tabkonten id=sc2><A
href="http://www.downcodes.com/">Tentang Kami</A> <A
href="http://www.downcodes.com/">Apa yang kami lakukan?</A> <A
href="http://www.downcodes.com/">Temui Tim</A> <A
href="http://www.downcodes.com/">Mengapa bekerja dengan kami?</A> <A
href="http://www.downcodes.com/">Kebijakan mutu</A> <A
href="http://www.downcodes.com/">Ketentuan</A> <A
href="http://www.downcodes.com/">Testimonial</A> <A
href="http://www.downcodes.com/">Tur Clexus</A> </DIV>
<Kelas DIV=tabkonten id=sc3><A
href="#">Clexus Pribadi
Pesan</A> <A href="#">Gambar
Galeri</A> <A href="#">Pelanggan
Manajemen</A> <A
href="#">Templat
Bekerja</A> </DIV>
<Kelas DIV=tabkonten id=sc4><A
href="#">Web
Desain</A> <A
href="#">Web
Perkembangan</A> <A
href="#">Logo
Desain</A> <A
href="#">Cetak
Desain</A> </DIV>
<Kelas DIV=tabkonten id=sc5><A
href="#">Berita Clexus</A>
<A href="#">Joomla
Berita</A> <A
href="#">Berita Umum</A>
</DIV>
<Kelas DIV=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

isi{text-align:center}
.cx_tabmenu {
PADDING-ATAS: 2 piksel; WARNA LATAR BELAKANG: #474747; LEBAR: 790 piksel;
}
#ddimagetabs {
PADDING-KIRI: 10px
}
#ddimagetabs A {
PADDING-KANAN: 20px; BATAS-ATAS: #666666 1px padat; TAMPILAN: sebaris; PADDING-KIRI: 20px; UKURAN FONT: 12px; 2px; PADDING-TOP: 0px; KELUARGA FONT: Verdana, Arial, Helvetica, sans-serif; TINGGI: 33px; TEKS-SEJARAH: tengah;
}
#ddimagetabs A: arahkan kursor {
BORDER-TOP: #ffffff 1px solid; LATAR BELAKANG: url(../images/cx_menu_hover.jpg) #363636 bagian tengah bawah tanpa pengulangan;
}
#ddimagetabs A.saat ini {
BORDER-TOP: #ffffff 1px solid; LATAR BELAKANG: url(../images/cx_menu_hover.jpg) #363636 bagian tengah bawah tanpa pengulangan;
}
A.sclink:link {

}
A.sclink:mengunjungi {

}
A.sclink: arahkan kursor {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
BORDER-TOP: #ff9900 1 piksel padat
}
#ddimagetabs .saat ini#sclink1 {
BORDER-TOP: #ff9900 1 piksel padat
}
#sc1 A:tautan {

}
#sc1 A:mengunjungi {

}
#sc1 A:arahkan kursor {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
BORDER-TOP: #990099 1 piksel padat
}
#ddimagetabs .saat ini#sclink2 {
BORDER-TOP: #990099 1 piksel padat
}
#sc2 A:tautan {

}
#sc2 A:mengunjungi {

}
#sc2 A: arahkan kursor {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
BORDER-TOP: #0099cc 1 piksel padat
}
#ddimagetabs .saat ini#sclink3 {
BORDER-TOP: #0099cc 1 piksel padat
}
#sc3 A:tautan {

}
#sc3 A:mengunjungi {

}
#sc3 A: arahkan kursor {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
BORDER-TOP: #78ba00 1 piksel padat
}
#ddimagetabs .saat ini#sclink4 {
BORDER-TOP: #78ba00 1 piksel padat
}
#sc4 A:tautan {

}
#sc4 A:mengunjungi {

}
#sc4 A:arahkan kursor {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
BORDER-TOP: #99cccc 1 piksel padat
}
#ddimagetabs .saat ini#sclink5 {
BORDER-TOP: #99cccc 1 piksel padat
}
#sc5 A:tautan {

}
#sc5 A:mengunjungi {

}
#sc5 A:arahkan kursor {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
BORDER-TOP: #999999 1 piksel padat
}
#ddimagetabs .saat ini#sclink6 {
BORDER-TOP: #999999 1 piksel padat
}
#sc6 A:tautan {

}
#sc6 A:mengunjungi {

}
#sc6 A:arahkan kursor {

}
#ddimagetabs #sclink7 {
PADDING-KANAN: 30px; BORDER-TOP: #ff0000 1px solid; PADDING-LEFT: 30px; LATAR BELAKANG: #363636;
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px solid; LATAR BELAKANG: url(../images/cx_menu_hover_my.jpg) #cf1919 tanpa pengulangan di tengah bawah
}
#ddimagetabs .saat ini#sclink7 {
BORDER-TOP: #ef7777 1px solid; LATAR BELAKANG: url(../images/cx_menu_hover_my.jpg) #cf1919 tanpa pengulangan di tengah bawah
}
#sc7 A:tautan {

}
#sc7 A:mengunjungi {

}
#sc7 A: arahkan kursor {

}
#tabcontentcontainer {
LATAR BELAKANG: url(../images/sub_menu_bg.jpg) #fcfcfa ulangi-x;
}
.tabkonten {
TAMPILAN: tidak ada; PADDING-ATAS: 4 piksel
}
.tabkonten A:tautan {
PADDING-KANAN: 10px; PADDING-KIRI: 10px; UKURAN FONT: 11px; FLOAT: kiri; PADDING-BAWAH: 4px; PADDING-ATAS: 0px; KELUARGA FONT: Verdana, Arial, Helvetica, sans-serif; TINGGI: 18px; DEKORASI TEKS: tidak ada
}
.tabcontent A:dikunjungi {
PADDING-KANAN: 10px; PADDING-KIRI: 10px; UKURAN FONT: 11px; FLOAT: kiri; PADDING-BAWAH: 4px; PADDING-ATAS: 0px; KELUARGA FONT: Verdana, Arial, Helvetica, sans-serif; TINGGI: 18px; DEKORASI TEKS: tidak ada
}
.tabcontent A:arahkan {
LATAR BELAKANG: url(../images/cx_submenu_hover_grey.jpg) bagian tengah bawah tanpa pengulangan;
}
#submenu_aktif {
LATAR BELAKANG: url(../images/cx_submenu_hover.jpg) #666666 bagian tengah bawah tanpa pengulangan;
}