CSS만으로 드롭업 메뉴 만드는 방법 (:hover 효과 활용)

CSS만으로도 자바스크립트 없이 마우스를 올렸을 때 열리는 드롭업(dropup) 메뉴를 손쉽게 만들 수 있습니다. 드롭업 메뉴는 일반적인 드롭다운과 반대로 버튼 위쪽 방향으로 메뉴 항목이 펼쳐지는 형태로, 화면 하단에 고정된 내비게이션이나 푸터 근처에서 특히 유용하게 사용됩니다.

구현 원리

.dropdown-menu에 position: relative;를 지정해 메뉴의 기준점을 만듭니다.
.menu-content에 position: absolute;와 bottom: 50px;를 적용하면 메뉴가 버튼 위쪽으로 열립니다.
평소에는 display: none;으로 숨겨두고, :hover 선택자를 통해 display: block;으로 전환합니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* 메뉴 버튼 스타일 */
.menu-btn {
  background-color: #7e32d4;
  color: white;
  padding: 16px;
  font-size: 20px;
  font-weight: bolder;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: none;
}
/* 드롭업 컨테이너 */
.dropdown-menu {
  position: relative;
  display: inline-block;
  padding-top: 130px;
}
/* 평소에는 숨겨져 있는 메뉴 본체 */
.menu-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #017575;
  min-width: 160px;
  z-index: 1;
}
/* 메뉴 링크 스타일 */
.links {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid black;
}
.links:hover {
  background-color: rgb(8, 107, 46);
}
/* 버튼에 마우스를 올리면 메뉴 표시 */
.dropdown-menu:hover .menu-content {
  display: block;
}
.dropdown-menu:hover .menu-btn {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>아래 버튼에 마우스를 올리면 드롭업 메뉴가 열립니다</h2>
<div class="dropdown-menu">
<button class="menu-btn">열기 <</button>
<div class="menu-content">
<a class="links" href="#">문의하기</a>
<a class="links" href="#">찾아오시는 길</a>
<a class="links" href="#">소개</a>
</div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 보라색 배경의 ‘열기’ 버튼이 화면에 나타납니다.

CSS만으로 드롭업 메뉴 만드는 방법 (:hover 효과 활용)

버튼에 마우스를 올리면 버튼 색상이 초록색으로 바뀌면서, 메뉴가 버튼 위쪽으로 펼쳐지는 것을 확인할 수 있습니다.

CSS만으로 드롭업 메뉴 만드는 방법 (:hover 효과 활용)

마무리 팁

모바일 환경에서는 :hover가 동작하지 않는 경우가 많으므로, 실무에서는 클릭 이벤트나 체크박스 해키(<input type="checkbox">) 방식을 함께 활용하면 더 안정적으로 동작하는 메뉴를 만들 수 있습니다. 또한 transition 속성을 추가하면 메뉴가 부드럽게 나타나는 애니메이션 효과도 손쉽게 구현할 수 있습니다.