הוספת תפריט משנה

חלק מהיחידה שליטה ב-CSS במסלול ה-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>