드롭다운(dropdown) 효과
해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과
display 속성을 이용하여 드롭다운 효과를 구현
<style>
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #F9F9F9;
min-width: 160px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content { display: block; }
</style>
사용자가 마우스를 올리면 나타날 <div>요소의 display 속성값을 none으로 설정
처음에는 보이지 않지만 특정 요소에 마우스를 올리면 해당 <div>요소의 display 속성값이 블록-으로 변경 되어 보이게 됌
드롭다운(Dropdown) 메뉴
메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴
해당 요소의 display 속성을 이용하여 드롭다운 메뉴를 구현
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Dropdowns</title>
<style>
.dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #FFDAB9;
min-width: 70px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #CD853F; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropdown-button { background-color: #CD853F; }
</style>
</head>
<body>
<h1>드롭다운 메뉴</h1>
<div class="dropdown">
<button class="dropdown-button">Dropdown</button>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JAVA</a>
<a href="#">C++</a>
</div>
</div>
</body>
</html>
드롭다운 네비게이션 제작
https://dev-scratch.tistory.com/103
https://www.tcpschool.com/css/css_advanced_dropdown