서브메뉴 표시하기

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

챌린지

쉬움

이제 서브메뉴가 추가되었지만, 아마도 보기에 좋지 않다는 것을 눈치채셨을 것입니다. 항상 표시되어 있고 레이아웃도 우리가 원하는 방식이 아닙니다.

이번 레슨에서는 기본적으로 서브메뉴를 숨기고, 실제 드롭다운 메뉴처럼 마우스를 올렸을 때(hover) 나타나도록 하는 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>