2019. 2. 11. 22:08ㆍFront End 강의내용
115강. Dropdown 기능 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
header{
background-color: tan;
}
ul{
list-style-type: none;
}
ul li{
display: inline-block;
}
.dropdown{
display: none;
position: absolute; (절대위치)
background-color: tan;
}
.dropdown li{
display: block; (아래로 열리기)
}
.dropdown li a{
width: 100%; (밑에 열리는거 너비 맞추기)
}
li a{
display: inline-block; (옆으로 나열)
padding: 20px;
text-decoration: none; (링크 밑줄 없애기)
color: #fff;
transition: all 0.3s; (hover 천천히 변하기, 시간주는거)
}
li a:hover{
background-color: #fff;
color: tan;
}
li:hover > .dropdown{ (hover 마우스 갖다대면 아래에 열리기)
display: block;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Courses</a>
<ul class="dropdown"> (ul 안에 class 넣어야 됨)
<li><a href="">Css Basics</a></li>
<li><a href="">Selectors</a></li>
</ul>
</li>
<li><a href="">About Us</a></li>
</ul>
</nav>
</header>
</body>
</html>
The Front End Web Developer Bootcamp by Hichem Med (115 / 449)
'Front End 강의내용' 카테고리의 다른 글
| 125강. ::before, ::after 적용 (0) | 2019.02.13 |
|---|---|
| 124강. ::first-letter, ::first-line, ::selector 적용 (0) | 2019.02.13 |
| 122강. only-of-type 적용 (0) | 2019.02.12 |
| 121강. nth-child 적용 (0) | 2019.02.12 |
| 116강. opacity 적용 (0) | 2019.02.12 |