إظهار القائمة الفرعية

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 18 من 43.

التحدي

سهل

الآن بعد أن تمت إضافة القائمة الفرعية الخاصة بك، ربما لاحظت أنها لا تبدو رائعة — فهي مرئية طوال الوقت، والتنسيق ليس كما نريده.

في هذا الدرس، ستكتب CSS لـ إخفاء القائمة الفرعية افتراضيًا و جعلها تظهر عند تمرير الماوس (hover)، تمامًا مثل القائمة المنسدلة الحقيقية. ستضيف أيضًا بعض الأنماط البسيطة لجعلها تبدو أكثر ترتيبًا.

إخفاء القائمة الفرعية افتراضيًا
استخدم خاصية display: none; على .submenu.
إظهار القائمة الفرعية عند التمرير (hover)
استخدم المحدد .has-submenu:hover .submenu وقم بتعيين display: block;.
تحديد موقع القائمة الفرعية أسفل العنصر الأب
قم بتعيين position: absolute; على .submenu.
تأكد من أن .has-submenu لديه position: relative; ليعمل ذلك بشكل صحيح.
تنسيق القائمة الفرعية لمظهر أفضل

قم بتعيين لون خلفية
قم بإزالة أنماط القائمة الافتراضية باستخدام list-style: none;
أضف مسافات داخل كل عنصر باستخدام padding: 10px;
أضف عرضًا مناسبًا

لا تتردد في تخصيص أي شيء — الألوان، الخطوط، الحدود — اجعلها خاصة بك!

جرّب بنفسك

<html>
<head>
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <section class="menu-panel">
  <h2>Hobby Club</h2>
  <nav class="top-menu">
    <ul class="menu-list">
      <li class="menu-item">Photography</li>
      <li class="menu-item">Cooking</li>
      <li class="menu-item has-submenu">
        Games
        <ul class="submenu">
          <li>Board Games</li>
          <li>Card Games</li>
          <li>Video Games</li>
        </ul>
      </li>
      <li class="menu-item">Drawing</li>
      <li class="menu-item">Music</li>
    </ul>
  </nav>
  <div class="menu-controls">
    <input type="text" class="search" placeholder="Search activities..." />
    <button class="cta-button">Join a Club!</button>
  </div>
  <div class="info-section">
    <p class="intro">Welcome to the Hobby Club community!</p>
    <p>Joining a hobby club is a great way to meet people who share your interests.</p>
    <p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
   </div>
</section>
</body>
</html>