폴 다운 메뉴 만들기
<h1>미션 클리어</h1>
<nav class="menu-1">
<ul>
<li><a href="#">메뉴아이템1</a></li>
<li><a href="#">메뉴아이템2</a></li>
<li><a href="#">메뉴아이템3</a></li>
</ul>
</nav>
HTML
복사
ul,li{
margin:0px;
padding:0px;
list-style:none;
}
a {
/* 이렇게 하면 나중에 문제가 됩니다. */
/* inherit => 나는 개성이 없어요. => 나는 부모의 속성을 그대로 물려받겠습니다. */
color:inherit;
text-decoration:none;
}
.menu-1{
text-align:center;
}
.menu-1 > ul{
background-color: lightgray;
display: inline-block;
padding: 0 10px; /* 좌우 각각 0, 10px여백*/
border-radius: 5px;
}
.menu-1>ul>li{
display: inline-block;
background-color: lightgray;
width:200px;
}
.menu-1>ul>li>a{
padding:10px;
display: block;
}
.menu-1>ul>li:hover>a{
color: white;
background-color: black;
}
CSS
복사
static: 부모 신경쓰지 않고 마이웨이를 간다.
absolute: 부모 신경쓰지 않고 화면 기준으로 움직임
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!--
- [x] 작업 1, 1차 메뉴 마크업
- [x] 작업 2, 노말라이즈
- [x] 작업 3, 1차 메뉴 완성
- [x] 작업 4, 2차 메뉴 마크업
- [x] 작업 5, 2차 메뉴를 평소에 숨기기
- [x] 작업 6, 2차 메뉴를 유령화
- [x] 작업 7, 1차 메뉴 아이템을 유령의 집화
- [x] 작업 8, 2차 메뉴 아이템 텍스트도 꾸미기
- [x] 작업 9, 2차 메뉴에 배경색
- [x] 작업 10, 모든 메뉴에 배경색을 한방에
-->
<!--
nav.menu-box-1>ul>li*3>a[href="#"]{1차 메뉴 아이템 $}+ul>li*3>a[href="#"]{2차 메뉴 아이템 $}
-->
<nav class="menu-box-1">
<ul>
<li>
<a href="#">1차 메뉴 아이템 1</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 2</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 3</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
CSS
복사
/* 노말라이즈 시작 */
body, ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* 노말라이즈 끝 */
/* 메뉴박스 */
.menu-box-1 {
text-align:center;
}
/* 메뉴 */
.menu-box-1 ul {
background-color:#afafaf;
}
/* 1차 메뉴 */
.menu-box-1 > ul {
display:inline-block;
padding:0 20px;
border-radius:10px;
}
/* 1차 메뉴 아이템 */
.menu-box-1 > ul > li {
display:inline-block;
position:relative;
}
/* 메뉴 아이템 텍스트 */
.menu-box-1 ul > li > a {
padding:10px;
display: block;
font-weight:bold;
}
/* 호버된 메뉴 아이템의 텍스트 */
.menu-box-1 ul > li:hover > a {
background-color:black;
color:white;
}
/* 2차 메뉴 */
.menu-box-1 > ul > li > ul {
position:absolute;
display:none;
top:100%;
left:0;
}
/* 호버된 1차 메뉴 아이템의 자식 메뉴 */
.menu-box-1 > ul > li:hover > ul {
display:block;
}
CSS
복사
