웹사이트에서 여러 개의 하위 메뉴를 깔끔하게 정리하려면 드롭다운 형태의 하위 탐색 메뉴(sub navigation menu)가 효과적입니다. 이 글에서는 자바스크립트 없이 CSS만 사용하여 마우스를 올리면(hover) 하위 메뉴가 펼쳐지는 내비게이션 바를 만드는 방법을 소개합니다.
핵심 원리는 간단합니다. 상위 메뉴 항목을 감싸는 컨테이너에 :hover 가상 클래스를 적용하고, 평소에는 display: none;으로 숨겨둔 하위 메뉴를 마우스 오버 시 display: block;으로 전환하는 것입니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
nav {
overflow: hidden;
background-color: rgb(0, 52, 73);
}
nav .links {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .sub-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: rgb(0, 109, 67);
margin: 0;
}
nav .links:hover,
.subnav:hover .sub-btn {
background-color: rgb(101, 219, 255);
color: black;
font-weight: bolder;
}
.sub-content {
display: none;
position: absolute;
left: 0;
background-color: rgb(0, 156, 83);
width: 100%;
z-index: 1;
}
.sub-content a {
float: left;
color: white;
text-decoration: none;
}
.sub-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .sub-content {
display: block;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Contact</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<div class="subnav">
<button class="sub-btn">Our Social Media</button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
</nav>
</body>
</html>코드 설명
1. 기본 내비게이션 바 구성
nav 요소에 짙은 청록색 배경을 지정하고 overflow: hidden;으로 플로팅된 자식 요소들을 감싸줍니다. 각 메뉴 링크(.links)는 float: left;로 가로 배치되며, 적절한 패딩으로 클릭 영역을 넓혀 사용성을 높였습니다.
2. 하위 메뉴 버튼과 콘텐츠
.subnav div 안에 드롭다운 역할을 하는 버튼(.sub-btn)과 실제 하위 링크들이 담긴 .sub-content div를 배치합니다. .sub-content는 평소 display: none; 상태로 숨겨져 있으며, position: absolute;와 width: 100%; 덕분에 화면 전체 폭의 드롭다운 패널로 나타납니다.
3. Hover 효과로 메뉴 펼치기
.subnav:hover .sub-content { display: block; } 규칙이 핵심입니다. 사용자가 'Our Social Media' 버튼 위에 마우스를 올리면 숨겨진 하위 메뉴가 나타나고, 버튼과 링크들의 배경색·글자색도 함께 변경되어 시각적 피드백을 제공합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 내비게이션 바가 출력됩니다.
드롭다운 버튼에 마우스를 올리면(hover) 아래와 같이 하위 메뉴가 펼쳐집니다.
마무리 및 활용 팁
이처럼 CSS의 :hover 선택자만으로도 별도의 스크립트 없이 직관적인 드롭다운 내비게이션을 구현할 수 있습니다. 실무에서 적용할 때는 다음 사항을 함께 고려해 보세요.
- 모바일 대응: 터치 환경에서는 hover가 동작하지 않으므로, 미디어 쿼리로 햄버거 메뉴 등 별도의 UI를 제공하는 것이 좋습니다.
- 접근성: 키보드 사용자를 위해 :focus-within 선택자를 함께 사용하면 Tab 키로도 하위 메뉴를 열 수 있습니다.
- 부드러운 전환: display 대신 opacity와 visibility, transition 속성을 조합하면 페이드 인/아웃 애니메이션 효과를 추가할 수 있습니다.