サブメニューの追加

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 17/43。

チャレンジ

簡単

このミニプロジェクトでは、ドロップダウンナビゲーションメニューをステップバイステップで構築します。基本的なトップナビゲーションバーから始めて、"Games" の下にサブメニューを追加し、CSSの疑似クラスを使用してスタイルを設定します。また、検索バーやCTAボタンを追加してデザインを強化し、その過程でFlexboxやインタラクティブなスタイルといった主要なウェブデザインの概念を学びます。

このチャレンジでは、"Games" メニュー項目の下にサブメニューを追加することから、ドロップダウンメニューの構築を開始します。

"Games" 用の <li class="has-submenu"> の中に、新しい <ul class="submenu"> を追加します。
サブメニューの中に、3つの新しい <li> 項目を作成します：
1. Board Games
2. Card Games
3. Video Games

この段階では、正しい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>