반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>드롭다운 네비게이션</title>
<link href="css/ex08.css" rel="stylesheet">
</head>
<body>
<div id='navi'>
<ul>
<li class="active"><a href="#">Menu1</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li><a href="#">Menu4</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li><a href="#">Menu5</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
ul, li, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
*{
text-align:center;
}
/* 부메뉴가 있는 네비게이션바
2depth 네비게이션바 */
#navi{
}
#navi>ul{
display:flex;
width:60%;
}
#navi>ul:after{
}
#navi>ul>li{
width:20%;
/* 말줄임표 공식 */
white-space:nowrap; /* 줄안바꾸기 */
text-overflow:ellipsis; /* 생략기호 */
padding:15px;
background:indigo;
color:white;
border-left:1px solid white;
position:relative;
}
#navi>ul>li>ul{
height:0;
transition:0.5s;
overflow:hidden;
background:purple;
width:100%;
position:absolute;
left:-2px;
top:54px;
}
#navi>ul>li:hover>ul{
height:100px;
left:-2px;
top:54px;
border:3px solid lightblue;
}
#navi>ul>li>ul>li{
padding:10px;
visibility:hidden;
opacity:0;
transition:0.3s;
}
#navi>ul>li:hover>ul li{
visibility:visible;
opacity:1;
}
#navi>ul>li:hover{
background:lavender;
color:black;
border:3px solid steelblue;
}
#navi ul>li{
border:3px solid transparent;
}
#navi>ul>li>ul>li:hover{
background:darkblue;
color:yellow;
}
3. HTML / CSS 파일
ex08.html
0.00MB
ex08.css
0.00MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 64(에릭마이어 reset.css) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190623 Basic Study 63(아코디언 네비게이션 바) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 61(세로 네비게이션 바) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 60(풍선 도움말) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 59(풀화면 동영상 - 서브메뉴) (0) | 2019.06.23 |
