Show the Submenu

Part of the CSS Mastery section of Coddy's HTML journey — lesson 18 of 43.

Challenge

Easy

Now that your submenu is added, you probably noticed it doesn’t look great — it’s visible all the time, and the layout isn’t what we want.

In this lesson, you'll write CSS to hide the submenu by default and make it appear on hover, just like a real dropdown menu. You’ll also add a few simple styles to make it look cleaner.

Hide the submenu by default
Use the display: none; property on .submenu.
Show the submenu on hover
Use the selector .has-submenu:hover .submenu and set display: block;.
Position the submenu below the parent item
Set position: absolute; on .submenu.
Make sure .has-submenu has position: relative; to make it work.
Style the submenu for better appearance

Set a background color
Remove default list styles with list-style: none;
Add spacing inside each item using padding: 10px;
Add an appropriate width

Feel free to customize anything — colors, fonts, borders — make it your own!

Try it yourself

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