서브메뉴 표시하기

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 18번째.

챌린지

쉬움

이제 하위 메뉴가 추가되었으므로, 아마 보기 좋지 않다는 것을 알아차렸을 것입니다. 항상 표시되고 있으며, 레이아웃도 우리가 원하는 모습이 아닙니다.

이 레슨에서는 실제 드롭다운 메뉴처럼 기본적으로 submenu를 숨기고 호버 시 나타나게 하는 CSS를 작성합니다. 또한 더 깔끔하게 보이도록 몇 가지 간단한 styles도 추가합니다.

기본적으로 submenu 숨기기
.submenu에 display: none; 속성을 사용합니다.
호버 시 submenu 표시하기
.has-submenu:hover .submenu 선택기를 사용하고 display: block;으로 설정합니다.
부모 item 아래에 submenu 배치하기
.submenu에 position: absolute;를 설정합니다.
제대로 작동하도록 .has-submenu에 position: relative;가 있는지 확인합니다.
더 나은 appearance를 위해 submenu 스타일 지정하기

background color 설정하기
list-style: none;을 사용하여 기본 list styles 제거하기
padding: 10px;을 사용하여 각 item 안쪽에 간격 추가하기
적절한 width 추가하기

원하는 대로 자유롭게 사용자 지정하세요. color, 글꼴, 테두리 등을 조정하여 나만의 스타일로 만들어 보세요!

직접 해보기

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