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

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

التحدي

سهل

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

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

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

في هذه المرحلة، ركز على كتابة هيكل 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>