1. dropdown
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>드롭다운 상단메뉴(droptop.html)</title>
</head>
<body>
<div>
<!-- 상단메뉴를 작성하기위해서 영역설정 -->
<ul>
<li><a href="#">Home</a></li><!-- 메인페이지 -->
<li><a href="#">Service</a><!-- 부메뉴작성하는 방법(li태그에 ul태그추가(li) -->
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
2. dropdown(2)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>드롭다운 상단메뉴(droptop2.html)</title>
<link href="./css/droptop2.css" rel="stylesheet">
</head>
<body>
<div>
<!-- 상단메뉴를 작성하기위해서 영역설정 -->
<ul class="dropdownmenu">
<li><a href="#">Home</a></li><!-- 메인페이지 -->
<li><a href="#">Service</a><!-- 부메뉴작성하는 방법(li태그에 ul태그추가(li) -->
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">SubMenu</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
3. dropdown.css
/*
상단메뉴 스타일파일
중첩된 태그를 스타일 적용시키는 방법
1) 부모태그 > 자식태그 => 부모태크 바로 밑에 있는 자식태그가 스타일 적용대상자
2) 부모태크 자식태크 => 부모태크 밑의 손자태크까지 적용
*/
.dropdownmenu > li {
float: left; /* 왼쪽 정렬 */
/* absolute: 좌표값이 정해져 있기 때문에 메뉴가 겹쳐서 출력 */
position: relative; /*어느 특정한 항목을 기준으로 이용해서 상대적으로 배치시키는 방법*/
background: #67b0d1;
width: 25%; /* 4개의 메뉴를균등하게 배분*/
}
.dropdownmenu > li > a {
display: block;
font-size: 16px;
color: #ffffff;
text-align: center;
height: 60px;
line-height: 60px;
}
/*hover 적용*/
.dropdownmenu > li:hover {
background: #7bbbd7;
}
.dropdownmenu > li:hover > ul {
left: 0px;
top: 60px;
}
/* 메인메뉴 바로 밑에 하위메뉴들 화면상에 임시로 안보이게 설정 */
.dropdownmenu ul {
position: absolute; /* left, top을 이용해서 좌표를 설정 */
top: -9999px; /* left(x좌표는 변하지 않은 상태에서 위로 맨 끝으로 올려서 안보이게 설정 */
z-index: 9999px; /* 맨 앞로 배치*/
width: 140px;
border: 1px solid #cccccc;
}
.dropdownmenu ul li{ /* 서브메뉴 모든 항목*/
position: relative;
}
.dropdownmenu ul a { /* ul태그 하위의 모든 a 태그 */
display: block; /* 넓이, 높이 지정 가능 */
color: #aaaaaa;
font-size: 12px;
line-height: 40px;
background: #ffffff;
padding-left: 20px;
}
.dropdownmenu ul a:hover {
color: #ffffff;
background: #67b0d1;
}
.dropdownmenu ul li:hover > ul {
position: absolute;
top: 0;
left: 100%;
}
/* 상단메뉴를 맨 좌측에 고정*/
body, ul {
margin: 0;
padding: 0;
}
/* 메뉴앞의 마크 삭제, 링크문자열 밑줄 삭제*/
ul {
list-style: none;
}
a {
text-decoration: none;
}
'KIC > HTML-CSS-JS' 카테고리의 다른 글
| [HTML/CSS/JS] DAY6 (0) | 2020.10.12 |
|---|---|
| [HTML/CSS/JS] DAY5 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY4 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY3 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY2 (0) | 2020.10.12 |