2018.12.05 메뉴디자인하기
2018. 12. 5. 16:37ㆍHTML5&CSS
#1 메뉴 디자인하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>메뉴 만들기</title>
<style>
*{margin: 0; padding: 0;}
nav ul{
list-style-type: none;
}
nav ul .list{
/* display: table-cell; */
/* display: inline-block; */
float: left;
}
nav ul .list a{
padding:0 10px;
text-decoration: none;
color: brown;
}
nav ul::after{
content: "";
clear: both;
display: block;
}
.dropdown{
display: none;
}
/* .class:hover .class/child{diplay:block;}→ 마우스가 근접했을 때 반응하게 만들어줌 */
.list:hover .dropdown{
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li class="list"><a href="#">HOME</a></li>
<li class="list"><a href="#">Products</a>
<ul class="dropdown">
<li><a href="#">Sliders</a></li>
<li><a href="#">Galleries</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Extensions</a></li>
</ul>
</li>
<li class="list"><a href="#">Company</a></li>
<li class="list"><a href="#">Address</a></li>
</ul>
</nav>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| 2018.12.06 nav,메뉴작성하기,반응형,Position 설정 (0) | 2018.12.06 |
|---|---|
| 회원가입 화면 만들기 (0) | 2018.12.05 |
| 2018.12.05 달력&체크박스&라디오&외부 이미지 (0) | 2018.12.05 |
| 2018.12.04 로그인폼,텍스트 입력창,버튼 (0) | 2018.12.04 |
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |