添加子菜单

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 17 课，共 43 课。

挑战

简单

在这个迷你项目中，你将一步步构建一个下拉导航菜单。你会从一个基本的顶部导航栏开始，在 “Games” 下方添加子菜单，并使用 CSS 伪类设置样式。你还会添加搜索栏和 CTA 按钮来改进设计，并在过程中学习弹性盒子等重要的网页设计概念，以及交互样式。

在这个挑战中，你将先在 “Games” 菜单项下添加子菜单，开始构建下拉菜单。

在 “Games” 对应的 <li class="has-submenu"> 内，添加一个新的 <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>