HTML المصدر:
مثال كود المصدر
<div معرف = "التنقل">
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1'” onMouseOut=”this.className='menu2'”>المفتاح هو
<div class=”قائمة”>
<a href=”http://www.onlygrape.com/“>البحث</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
<a href=”#”>المحتوى</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
</div>
</لي>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>التعرف على المزيد
<div class=”قائمة”>
<a href=”http://www.onlygrape.com/“>البحث</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
</div>
</لي>
<li class=”menu2″ onMouseOver=”this.className='menu1'” onMouseOut=”this.className='menu2'”>الإجابة على هذا السؤال
<div class=”قائمة”>
<a href=”http://www.onlygrape.com/“>البحث</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
</div>
</لي>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>الإجابة على هذا السؤال
<div class=”قائمة”>
<a href=”http://www.onlygrape.com/“>البحث</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
<a href=”#”>المحتوى</a><br />
<a href=”#”>الصفحة الرئيسية</a><br />
<a href=”#”>المحتوى</a><br />
</div>
</لي>
</ul>
</div>
كود
المصدر
فئة = "القائمة 2"
onMouseOver=”this.className='menu1′”
onMouseOut=”this.className='menu2′”
استخدم CSS:
مثال على كود المصدر
جسم{
لون الخلفية: أبيض؛
حجم الخط: 12 بكسل؛
عائلة الخط: Arial، Helvetica، sans-serif؛
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
اللون: أبيض؛
}
أول، لي {
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
}
لي {
عرض:مضمنة؛
نمط القائمة: لا شيء؛
موقف نمط القائمة: خارج؛
محاذاة النص:مركز؛
وزن الخط: غامق؛
تعويم: يسار؛
}
أ:رابط{
اللون: #336601؛
زخرفة النص: لا شيء؛
تعويم: يسار؛
العرض: 100 بكسل؛
الحشو: 3px 5px 0px 5px؛
}
أ:زار{
اللون: #336601؛
زخرفة النص: لا شيء؛
تعويم: يسار؛
الحشو: 3px 5px 0px 5px؛
العرض: 100 بكسل؛
}
أ:تحوم{
اللون: أبيض؛
تعويم: يسار؛
الحشو: 3px 3px 0px 20px؛
العرض: 88 بكسل؛
زخرفة النص: لا شيء؛
لون الخلفية:#539D26;
}
أ:نشط{
اللون: أبيض؛
تعويم: يسار؛
الحشو: 3px 3px 0px 20px؛
العرض: 88 بكسل؛
زخرفة النص: لا شيء؛
لون الخلفية:#BD06B4;
}
#التنقل{
العرض: 600 بكسل؛
الارتفاع: 30 بكسل؛
الحد السفلي:0px;
الحشو: 0px 5px؛
الموقف:مطلق؛
مؤشر z:1;
اليسار: 198 بكسل؛
أعلى: 25px؛
}
.قائمة{
ارتفاع الخط: 20 بكسل؛
محاذاة النص:يسار؛
الحشو: 4 بكسل؛
وزن الخط: عادي؛
}
.menu1{
العرض: 120 بكسل؛
الارتفاع: تلقائي؛
الهامش: 6 بكسل 4 بكسل 0 بكسل 0 بكسل؛
الحدود: 1 بكسل صلب #9CDD75؛
لون الخلفية: #F1FBEC؛
اللون: #336601؛
الحشو: 6 بكسل 0 بكسل 0 بكسل 0 بكسل؛
المؤشر:اليد؛
تجاوز-y:مخفي;
عامل التصفية: ألفا (التعتيم = 70)؛
-moz-عتامة:0.7؛
}
.menu2{
العرض: 120 بكسل؛
الارتفاع: 18 بكسل؛
الهامش: 6 بكسل 4 بكسل 0 بكسل 0 بكسل؛
لون الخلفية:#F5F5F5;
اللون: #999999؛
الحدود: 1 بكسل صلب #EEE8DD؛
الحشو: 6 بكسل 0 بكسل 0 بكسل 0 بكسل؛
تجاوز-y:مخفي;
المؤشر:اليد؛
}