ตัวอย่างเค้าโครง CSS: เมนูสองระดับ CSS+JS ที่ดี

<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)">หน้าแรก</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">บริษัท</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">ผลิตภัณฑ์</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">ผลงานของเรา</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">ข่าวสาร</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">ร้านค้า</A> </DIV>
<BR style="ล้าง: ซ้าย">
<DIV id=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.downcodes.com/">เกี่ยวกับเรา</A> <A
href="http://www.downcodes.com/">เราจะทำอย่างไร?</A> <A
href="http://www.downcodes.com/">พบกับทีมงาน</A> <A
href="http://www.downcodes.com/">ทำไมต้องร่วมงานกับเรา</A> <A
href="http://www.downcodes.com/">นโยบายคุณภาพ</A> <A
href="http://www.downcodes.com/">ข้อกำหนด</A> <A
href="http://www.downcodes.com/">คำรับรอง</A> <A
href="http://www.downcodes.com/">เคล็กซัส ทัวร์</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">Clexus ส่วนตัว
ข้อความ</A> <A href="#">รูปภาพ
แกลเลอรี่</A> <A href="#">ลูกค้า
การจัดการ</A> <ก
href="#">เทมเพลต
ใช้งานได้</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">เว็บ
การออกแบบ</A> <A
href="#">เว็บ
การพัฒนา</A> <A
href="#">โลโก้
การออกแบบ</A> <A
href="#">พิมพ์
การออกแบบ</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">ข่าวเคล็กซัส</A>
<A href="#">จูมล่า
ข่าว</A> <ก
href="#">ข่าวทั่วไป</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

เนื้อความ {การจัดตำแหน่งข้อความ: กึ่งกลาง}
.cx_tabmenu {
ช่องว่างด้านบน: 2px; พื้นหลัง-สี: #474747;WIDTH: 790px;
-
#ddimagetabs {
PADDING-ซ้าย: 10px
-
#ddimagetabs ก {
PADDING-ขวา: 20px; BORDER-TOP: #363636; FLOAT: ซ้าย; LINE-HEIGHT: 33px; 2px; PADDING-TOP: 0px; TEXT-ALIGN: กึ่งกลาง;
-
#ddimagetabs A:โฮเวอร์ {
เส้นขอบด้านบน: #ffffff 1px solid; พื้นหลัง: url(../images/cx_menu_hover.jpg) #363636 ไม่ทำซ้ำตรงกลางด้านล่าง;
-
#ddimagetabs A.ปัจจุบัน {
เส้นขอบด้านบน: #ffffff 1px solid; พื้นหลัง: url(../images/cx_menu_hover.jpg) #363636 ไม่ทำซ้ำตรงกลางด้านล่าง;
-
A.sclink:ลิงค์ {

-
A.sclink: เยี่ยมชม {

-
A.sclink:โฮเวอร์ {

-
#sclink1 {

-
#ddimagetabs #sclink1 {

-
#ddimagetabs #sclink1:โฮเวอร์ {
ขอบด้านบน: #ff9900 1px ทึบ
-
#ddimagetabs .current#sclink1 {
ขอบด้านบน: #ff9900 1px ทึบ
-
#sc1 A:ลิงก์ {

-
#sc1 A: เยี่ยมชม {

-
#sc1 A:โฮเวอร์ {

-
#ddimagetabs #sclink2 {

-
#ddimagetabs #sclink2:โฮเวอร์ {
ขอบด้านบน: #990099 1px ทึบ
-
#ddimagetabs .current#sclink2 {
ขอบด้านบน: #990099 1px ทึบ
-
#sc2 A:ลิงก์ {

-
#sc2 A: เยี่ยมชม {

-
#sc2 A:โฮเวอร์ {

-
#ddimagetabs #sclink3 {

-
#ddimagetabs #sclink3:โฮเวอร์ {
ขอบด้านบน: #0099cc 1px ทึบ
-
#ddimagetabs .current#sclink3 {
ขอบด้านบน: #0099cc 1px ทึบ
-
#sc3 A:ลิงก์ {

-
#sc3 A: เยี่ยมชม {

-
#sc3 A:โฮเวอร์ {

-
#ddimagetabs #sclink4 {

-
#ddimagetabs #sclink4:โฮเวอร์ {
ขอบด้านบน: #78ba00 1px ทึบ
-
#ddimagetabs .current#sclink4 {
ขอบด้านบน: #78ba00 1px ทึบ
-
#sc4 A:ลิงก์ {

-
#sc4 A: เยี่ยมชม {

-
#sc4 A:โฮเวอร์ {

-
#ddimagetabs #sclink5 {

-
#ddimagetabs #sclink5:โฮเวอร์ {
ขอบด้านบน: #99cccc 1px ทึบ
-
#ddimagetabs .current#sclink5 {
ขอบด้านบน: #99cccc 1px ทึบ
-
#sc5 A:ลิงก์ {

-
#sc5 A: เยี่ยมชม {

-
#sc5 A:โฮเวอร์ {

-
#ddimagetabs #sclink6 {

-
#ddimagetabs #sclink6:โฮเวอร์ {
ขอบด้านบน: #999999 1px ทึบ
-
#ddimagetabs .current#sclink6 {
ขอบด้านบน: #999999 1px ทึบ
-
#sc6 A:ลิงก์ {

-
#sc6 A: เยี่ยมชม {

-
#sc6 A:โฮเวอร์ {

-
#ddimagetabs #sclink7 {
PADDING-ขวา: 30px; BORDER-TOP: #ff0000 1px solid; PADDING-LEFT: 30px;
-
#ddimagetabs #sclink7:โฮเวอร์ {
เส้นขอบด้านบน: #ef7777 1px ทึบ พื้นหลัง: url(../images/cx_menu_hover_my.jpg) #cf1919 ไม่ซ้ำตรงกลางด้านล่าง
-
#ddimagetabs .current#sclink7 {
เส้นขอบด้านบน: #ef7777 1px ทึบ พื้นหลัง: url(../images/cx_menu_hover_my.jpg) #cf1919 ไม่ซ้ำตรงกลางด้านล่าง
-
#sc7 A:ลิงก์ {

-
#sc7 A: เยี่ยมชม {

-
#sc7 A:โฮเวอร์ {

-
#tabcontentcontainer {
พื้นหลัง: url(../images/sub_menu_bg.jpg) #fcfcfa ซ้ำ-x; WIDTH: 790px; HEIGHT: 27px
-
.แท็บเนื้อหา {
จอแสดงผล: ไม่มี; PADDING-TOP: 4px
-
.tabcontent A: ลิงค์ {
PADDING-ขวา: 10px; PADDING-LEFT: ชี้; LINE-HEIGHT: 18px; ครอบครัวแบบอักษร: Verdana, Arial, Helvetica, sans-serif; ความสูง: 18px; การตกแต่งข้อความ: ไม่มี
-
.tabcontent A: เยี่ยมชม {
PADDING-ขวา: 10px; PADDING-LEFT: ชี้; LINE-HEIGHT: 18px; ครอบครัวแบบอักษร: Verdana, Arial, Helvetica, sans-serif; ความสูง: 18px; การตกแต่งข้อความ: ไม่มี
-
.tabcontent A:โฮเวอร์ {
พื้นหลัง: url(../images/cx_submenu_hover_grey.jpg) ไม่ต้องทำซ้ำตรงกลางด้านล่าง สี: #000000
-
#active_submenu {
พื้นหลัง: url(../images/cx_submenu_hover.jpg) #666666 ไม่ทำซ้ำตรงกลางด้านล่าง สี: #fff
-