サブメニューの表示

CoddyのHTMLジャーニー「CSSマスタリー」セクションの一部。レッスン 18/43。

チャレンジ

簡単

submenu を追加したので、おそらく見た目があまり良くないことに気づいたでしょう。常に表示されていて、レイアウトも私たちが望むものではありません。

このレッスンでは、実際の Dropdown menu のように、デフォルトで submenu を非表示にする CSS と、ホバー時に表示する CSS を記述します。また、見た目をよりすっきりさせるために、いくつかの簡単な styles も追加します。

デフォルトで submenu を非表示にする
.submenu に display: none; プロパティを使用します。
ホバー時に submenu を表示する
セレクター .has-submenu:hover .submenu を使用し、display: block; を設定します。
submenu を親 item の下に配置する
.submenu に position: absolute; を設定します。
機能させるには、.has-submenu に position: relative; が設定されていることを確認してください。
見た目を良くするために submenu を style する

background color を設定する
list-style: none; でデフォルトの list styles を削除する
padding: 10px; を使用して各 item の内側に間隔を追加する
適切な width を追加する

自由にカスタマイズしてください。colors、fonts、borders などを変更して、自分らしいデザインにしましょう！

自分で試してみよう

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