• 0

كيف أجعل محاذاة قائمة منسدلة متغيرة العرض إلى اليسار باستعمال css؟

أتوفر على كود التنسيق css التالي، والمتعلق بقائمة منسدلة تتوفر على submenu متغيرة العرض:

.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; }
.menu li:hover > ul li { display: block; background: #bbb; width: auto; }

وأريد جعل محاذاة  القائمة إلى جهة اليسار.

حاولت ذلك بإضافة السطر التالي:

#menu-left li:hover > ul { width: 150px; margin-left: -50px; }

كيف أتمكن من الوصول إلى ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

الطريقة اﻷفضل للحصول على ذلك، وهي بإدراج:

.menu li { position:relative;...}

لتتموضع sub menu بدلالة العنصر الأب المحتوي لها، والذي سيحتوي على القيمة  absolute للخاصية relative.

ثم  سنخصص display: none  لـ menu li ul .

لنحصل على التنسيق التالي:

/* apply to both */
.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; position: relative; padding-left: 0px; margin: 1px; background: #ddd; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; right: 0; }
.menu li:hover > ul li { background: #bbb; white-space: nowrap; }

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن