显示子菜单

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

挑战

简单

现在你已经添加了子菜单，可能也注意到了它看起来不太好。它一直显示着，而且布局也不是我们想要的样子。

在本课中，你将编写 CSS，默认隐藏子菜单，并让它在悬停时显示，就像真正的下拉菜单一样。你还会添加一些简单的样式，让它看起来更整洁。

默认隐藏子菜单
在 .submenu 上使用 display: none; 属性。
悬停时显示子菜单
使用选择器 .has-submenu:hover .submenu，并设置 display: block;。
将子菜单定位在父级菜单项下方
在 .submenu 上设置 position: absolute;。
确保 .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>