드롭다운 메뉴를 만드는 간단한 HTML 코드를 제공합니다.
이 코드는 HTML과 CSS를 사용하여 드롭다운 메뉴를 생성합니다.
<!DOCTYPE html>
<html>
<head>
<title>드롭다운 메뉴</title>
<style>
/* 드롭다운 메뉴 스타일 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-item {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-item:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>드롭다운 메뉴 예제</h1>
<div class="dropdown">
<span>메뉴</span>
<div class="dropdown-content">
<a href="#">항목 1</a>
<a href="#">항목 2</a>
<a href="#">항목 3</a>
</div>
</div>
</body>
</html>
위 코드에서는 .dropdown 클래스로 드롭다운 메뉴를 감싸고, .dropdown-content 클래스로 실제 드롭다운 항목들을 감쌉니다. 마우스를 메뉴 위로 가져가면 드롭다운 항목이 나타납니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 화면에 예쁜 텍스트 추가 (1) | 2023.12.08 |
|---|---|
| 간단한 레시피 페이지 (1) | 2023.12.08 |
| 캐러셀 이미지 슬라이더 (1) | 2023.12.08 |
| 달력 표시 (0) | 2023.12.08 |
| 주식 가격 정보 표시 (1) | 2023.12.08 |
