Add the Submenu

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

Challenge

Easy

In this mini-project, you'll build a dropdown navigation menu step by step. Starting with a basic top navigation bar, you'll add a submenu under "Games" and style it using CSS pseudo-classes. You'll also enhance the design with a search bar and CTA button, learning key web design concepts like flexbox and interactive styles along the way.

In this challenge, you’ll start building your dropdown menu by adding the submenu under the "Games" menu item.

Inside the <li class="has-submenu"> for "Games", add a new <ul class="submenu">.
Inside the submenu, create 3 new <li> items:
1. Board Games
2. Card Games
3. Video Games

At this stage, focus on writing the correct HTML structure — no styling needed yet.

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