إضافة القائمة الفرعية

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

التحدي

سهل

في هذا المشروع المصغّر، ستبني قائمة تنقّل منسدلة خطوةً بخطوة. بدءًا من شريط تنقّل علوي أساسي، ستضيف قائمة فرعية أسفل "Games" وتنسّقها باستخدام الفئات الزائفة في CSS. كما ستحسّن التصميم باستخدام شريط بحث وزر CTA، وتتعلّم في أثناء ذلك مفاهيم أساسية في تصميم الويب مثل flexbox والأنماط التفاعلية.

في هذا التحدي، ستبدأ ببناء قائمتك المنسدلة من خلال إضافة القائمة الفرعية أسفل عنصر القائمة "Games".

داخل <li class="has-submenu"> الخاص بـ "Games"، أضف <ul class="submenu"> جديدًا.
داخل القائمة الفرعية، أنشئ 3 عناصر <li> جديدة:
1. ألعاب الطاولة
2. ألعاب الورق
3. ألعاب الفيديو

في هذه المرحلة، ركّز على كتابة بنية HTML الصحيحة: لا حاجة إلى إضافة تنسيق بعد.

جرّب بنفسك

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