إنشاء قائمة منسدلة عند تمررير مؤشر الفأرة على الزر المقصود فتنبثق لك قائمة عند استخدامك للكومبيوتر و تنبثق القائمة ثانيا عند النقر عليها عند استخدام جهاز لوحي أو هاتف ذكي , القائمة بها روابط تملؤها أنت بصفحات من إختيارك , يمكنك معاينة الزر في الأسفل .

• بلوجر
  • أدوات
  • أكواد
  • تعديل
  • قوالب

لإنشاء قائمة منسدلة تظهر عند تمرير زر الفأرة على الأداة يتوجب علينا تطبيق شرطين أساسيين لا ثالث لهما :

الشرط الأول :

يتوجب عليك إنشاء قائمة سواءا بعنصر <ul> أو <div> بحيث تكون القائمة داخل العنصر الذي إذا وضعت عليه زر الفأرة تظهر القائمة .
مثال توضيحي على ما قلنا :

<ul class="main-list"> <li class="droping-list"> بلوجر <ul class="list"> <li><a hreh="#"> أدوات </a></li> <li><a hreh="#"> أكواد </a></li> <li><a hreh="#"> تعديل </a></li> <li><a hreh="#"> قوالب </a></li> </ul> </li> </ul>

الشرط الثاني :

باستخدام الـ css نعطي القائمة خاصية display:none; لإخفائها , ونظهر القائمة بإضافة خاصية hover للعنصر الذي سنؤشر عليه بالفأرة , ونستدعي القائمة المخفية بإتباع إسم الـ id أو الـ class مع إسم القائمة المتبوع بـ hover و نعطي العنصر خاصية display:block; فتظهر معنا القائمة .
مثال توضيحي  :

<style> .droping-list:hover .list{ display:block; } .list { display: none; position: absolute; margin-top: 48px; background-color: #9c27b0; padding: 30px; border: 2px solid #761686; COLOR: WHITE; } .droping-list { padding: 17px; background-color: #9C27B0; color: white; border: 2px solid #761686; } .list li a { color: white; } </style>

ملاحظة : يمكنك نسخ كلا من كود HTML و CSS و لصقه في موقعك و سيعمل الزر .