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

เนื้อความ {การจัดตำแหน่งข้อความ: กึ่งกลาง}
.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
-