بناء القوائم المنسدلة المتداخلة | القوائم المتداخلة في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تمثل القوائم النقطية المتداخلة الأساس المعماري لكافة أشرطة التنقل العالمية ذات القوائم المنسدلة (Dropdown Menus). تشكل القائمة العلوية شريط التنقل الأفقي، بينما تمثل القوائم المتداخلة البطاقات المنسدلة التفاعلية.

الصف 2 صورة توضيحية

الهيكل الهرمي ثلاثي المستويات للقوائم المنسدلة

الصف 3 كود برمجي

HTML

<ul>
  <li><a href="/about">About</a></li>
  <li>
    <a href="/services">Services</a>
    <ul>
      <li><a href="/web">Web Design</a></li>
      <li><a href="/cloud">Cloud Hosting</a></li>
    </ul>
  </li>
</ul>

جرّب بنفسك

الصف 4 شرح توضيحي

تتولى قواعد تنسيق CSS إخفاء القائمة الفرعية تلقائياً عبر display: none أو الشفافية، ثم إظهارها بسلاسة فور تحويم المؤشر :hover أو تركيز لوحة المفاتيح :focus-within على عنصر <li> الأب.

الصف 5 ملاحظة هامة

Nested Lists in Dropdown Menus بناء القوائم المنسدلة المتداخلة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (القوائم المتداخلة في لغة HTML)