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

جزء من قسم 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>