العربية
<head> <script> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { العقدة = navRoot.childNodes[ i ]; if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";} العقدة.onmouseout=function() {this.className=this.className.replace(" over" , "");} } } } } window.onload=startList; </script> <style> body { الخط: عادي 11px verdana؛ } ul { الهامش: 0; الحشو: 0؛ نمط القائمة: لا شيء؛ العرض: 150 بكسل؛ /* عرض عناصر القائمة */ border-bottom: 1px Solid #ccc; } ul li { الموضع: نسبي؛ } لي ul { الموضع: مطلق؛ اليسار: 149 بكسل؛ /* تعيين 1 بكسل أقل من عرض القائمة */ top: 0; العرض: لا شيء؛ } /* أنماط عناصر القائمة */ ul li a { Display: block; زخرفة النص: لا شيء؛ اللون: #777؛ الخلفية: #ففف؛ /* خطأ IE6 */ الحشو: 5px; الحدود: 1px الصلبة #ccc؛ الحد السفلي: 0؛ } /* إصلاح IE. إخفاء من IE Mac */ * html ul li { float: left; الارتفاع: 1%؛ } * html ul li a { height: 1%; } /* النهاية */ ul li a:hover { color: #E2144A; الخلفية: #f9f9f9؛ } /* أنماط التحويم */ li ul li a { الحشو: 2px 5px; } /* أنماط القائمة الفرعية */ li:hover ul, li.over ul { Display: block; } /* السحر */ </style> </head> <body> <ul id="nav"> <li><a href="#">الصفحة الرئيسية</a></li> <li>< a href="#">حول</a> <ul> <li><a href="#">التاريخ</a></li> <li><a href="#">الفريق</a </li> <li><a href="#">المكاتب</a></li> </ul> </li> <li><a href="#">الخدمات</a> < ul> <li><a href="#">تصميم الويب</a></li> <li><a href="#">التسويق عبر الإنترنت</a></li> <li><a href ="#">الاستضافة</a></li> <li><a href="#">أسماء النطاقات</a></li> <li><a href="#">النطاق العريض</a </li> </ul> </li> <li><a href="#">اتصل بنا</a> <ul> <li><a href="#">المملكة المتحدة</a> </li> <li><a href="#">فرنسا</a></li> <li><a href="#">الولايات المتحدة الأمريكية</a></li> <li><a href ="#">أستراليا</a></li> </ul> </li> </ul> </body>
