CSS 강좌 | 드랍다운(Dropdown) 메뉴 만들기
드랍다운(Dropdown) 메뉴란 어떤 메뉴 위에 마우스를 올리면 그 하위 메뉴가 밑으로 나타나는 것을 말한다. CSS를 이용해서 드랍다운(Dropdown) 메뉴를 만들 수 있다.
아래 예제는 꾸밈이 거의 없는 아주 간단한 Dropdown 메뉴이다. 이 코드로 HTML 문서를 만든 후 [Menu 2]에 마우스를 올리면 하위 메뉴가 나타난다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Dropdown Menu </title>
<style>
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
padding: 5px;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0px;
padding: 0px;
position: absolute;
}
#menu ul ul li {
float: none;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id ="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</body>
</html>
User login
Search
