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

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

التحدي

سهل

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

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

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

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

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

جرّب بنفسك

<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>