مثال لتخطيط CSS: قائمة CSS+JS جيدة ذات مستويين

<معرف DIV=xcx_tabmenu>
<DIV class=cx_tabmenu id=cx_tabmenu>
<معرف DIV=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="CLEAR: left">
<معرف DIV=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="#">الويب
تصميم</أ> <أ
href="#">الويب
التطوير</A> <أ
href="#">الشعار
تصميم</أ> <أ
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 {
الحشو العلوي: 2 بكسل؛ لون الخلفية: #474747؛ العرض: 790 بكسل؛
}
#ddimagetabs {
المساحة المتروكة على اليسار: 10 بكسل
}
#ddimagetabs أ {
الحشو-اليمين: 20 بكسل؛ 2px؛ FONT-FAMILY: Verdana، Arial، Helvetica، sans-serif؛
}
#ddimagetabs أ:تحوم {
BORDER-TOP: #ffffff 1px Solid; BACKGROUND: url(../images/cx_menu_hover.jpg) #363636 الجزء السفلي الأوسط بدون تكرار؛
}
#ddimagetabs أ.الحالي {
BORDER-TOP: #ffffff 1px Solid; BACKGROUND: url(../images/cx_menu_hover.jpg) #363636 الجزء السفلي الأوسط بدون تكرار؛
}
أ. الرابط: الرابط {

}
أ.sclink:زار {

}
أ.sclink:تحوم {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
الحدود العلوية: #ff9900 1px صلب
}
#ddimagetabs .current#sclink1 {
الحدود العلوية: #ff9900 1px صلب
}
#sc1 أ:الرابط {

}
#sc1 أ:تمت الزيارة {

}
#sc1 أ:تحويم {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
الحدود العلوية: #990099 1 بكسل صلب
}
#ddimagetabs .current#sclink2 {
الحدود العلوية: #990099 1 بكسل صلب
}
#sc2 أ: الرابط {

}
#sc2 أ:تمت الزيارة {

}
#sc2 أ:تحويم {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
الحدود العلوية: #0099cc 1px صلب
}
#ddimagetabs .current#sclink3 {
الحدود العلوية: #0099cc 1px صلب
}
#sc3 أ: الرابط {

}
#sc3 أ:تمت الزيارة {

}
#sc3 أ:تحويم {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
الحدود العلوية: #78ba00 1px صلب
}
#ddimagetabs .current#sclink4 {
الحدود العلوية: #78ba00 1px صلب
}
#sc4 أ: الرابط {

}
#sc4 أ:تمت الزيارة {

}
#sc4 أ:تحويم {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
الحدود العلوية: #99cccc 1px صلب
}
#ddimagetabs .current#sclink5 {
الحدود العلوية: #99cccc 1px صلب
}
#sc5 أ:الرابط {

}
#sc5 أ:تمت الزيارة {

}
#sc5 أ:تحويم {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
الحدود العلوية: #999999 1 بكسل صلب
}
#ddimagetabs .current#sclink6 {
الحدود العلوية: #999999 1 بكسل صلب
}
#sc6 أ:الرابط {

}
#sc6 أ:تمت الزيارة {

}
#sc6 أ:تحويم {

}
#ddimagetabs #sclink7 {
الحشوة اليمنى: 30 بكسل؛ الحد العلوي: #ff0000 1 بكسل الصلبة؛ الحشوة اليسرى: 30 بكسل؛
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px الصلبة؛ الخلفية: url(../images/cx_menu_hover_my.jpg) #cf1919 الجزء السفلي الأوسط بدون تكرار
}
#ddimagetabs .current#sclink7 {
BORDER-TOP: #ef7777 1px الصلبة؛ الخلفية: url(../images/cx_menu_hover_my.jpg) #cf1919 الجزء السفلي الأوسط بدون تكرار
}
#sc7 أ:الرابط {

}
#sc7 أ:تمت الزيارة {

}
#sc7 أ:تحويم {

}
#tabcontentcontainer {
الخلفية: url(../images/sub_menu_bg.jpg) #fcfcfa تكرار-x؛ العرض: 790 بكسل؛ الارتفاع: 27 بكسل
}
محتوى التبويب {
العرض: لا يوجد؛
}
.tabcontent أ: الرابط {
الحشو الأيمن: 10 بكسل؛ حجم الخط: 11 بكسل؛ حجم الحشو: 4 بكسل؛ عائلة الخط: Verdana، Arial، Helvetica، sans-serif؛ الارتفاع: 18 بكسل؛ زخرفة النص: لا شيء
}
.tabcontent أ: تمت الزيارة {
الحشو الأيمن: 10 بكسل؛ حجم الخط: 11 بكسل؛ حجم الحشو: 4 بكسل؛ عائلة الخط: Verdana، Arial، Helvetica، sans-serif؛ الارتفاع: 18 بكسل؛ زخرفة النص: لا شيء
}
.tabcontent أ:تحوم {
الخلفية: url(../images/cx_submenu_hover_grey.jpg) الجزء السفلي الأوسط بدون تكرار؛ اللون: #000000
}
#active_submenu {
الخلفية: url(../images/cx_submenu_hover.jpg) #666666 الجزء السفلي المركزي بدون تكرار؛ اللون: #fff
}