הצגת תפריט המשנה

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 18 מתוך 43.

אתגר

קל

עכשיו, לאחר שהוספת את תפריט המשנה, כנראה שמת לב שהוא לא נראה נהדר. הוא גלוי כל הזמן, והפריסה אינה מה שאנחנו רוצים.

בשיעור הזה תכתוב CSS כדי להסתיר את תפריט המשנה כברירת מחדל ולהציג אותו בעת ריחוף מעליו, ממש כמו בתפריט נפתח אמיתי. בנוסף, תוסיף כמה סגנונות פשוטים כדי לשפר את המראה שלו.

הסתרת תפריט המשנה כברירת מחדל
השתמש במאפיין display: none; על .submenu.
הצגת תפריט המשנה בעת ריחוף מעליו
השתמש בבורר .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>