<html>
<style>
body {
margin: 0;
}
nav {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 300px 0;
box-sizing: border-box;
}
.nav01 { background: linear-gradient(90deg, #5f2c82 , #49a09d); }
/* common */
nav ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
position: relative;
float: left;
border: 0px solid #fff;
}
nav ul li:not(:first-child) {
border-left: none;
}
nav ul li a {
display: inline-block;
padding: 1em 4em;
color: #fff;
font: 400 18px/1 'Lato', sans-serif;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
nav ul ul {
position: absolute;
top: 100%;
left: -2px;
}
nav ul ul li {
float: none;
margin: 0;
}
nav ul ul li:not(:first-child) {
border: 0px solid #fff;
border-top: none;
}
nav ul ul ul {
position: absolute;
top: -2px;
left: 100%;
}
/* DEMO #1 */
.nav01 ul ul {
display: none;
}
.nav01 ul li:hover > ul {
display: block;
}
</style>
</head>
<body translate="no">
<nav class="nav01">
<ul>
<li><a href="#">JOIN US</a>
<ul>
<li><a href="http://withmodu.tistory.com">Odagiri ddat</a></li>
<li><a href="http://lowid.tistory.com">D.D</a></li>
</ul>
</li>
<li><a href="#">PORTFOLIO</a>
<ul>
<li><a href="http://withmodu.tistory.com">PINTER</a></li>
<li><a href="http://lowid.tistory.com">NAMING</a></li>
<li><a href="http://lowid.tistory.com">HOMEPAGE</a></li>
<li><a href="http://lowid.tistory.com">PACKAGE</a></li>
</ul>
</li>
<li><a href="#">SITEMAP</a>
<ul>
<li><a href="http://pixabay.com">PIXABAY</a></li>
<li><a href="http://printrest.com">PRINTERST</a></li>
<li><a href="http://http://blog.naver.com/takeyourbeat">EVERYTHING HAS VALUE</a></li>
</ul>
</li>
<li><a href="#">CONTACT US</a>
<ul>
<li><a href="http://plus.kakao.com/home/@moou">KAKAO PLUS</a></li>
<li><a href="https://www.facebook.com/juliao">SNS</a></li>
<ul>
<li><a href="https://www.w3schools.com">W3 schools</a></li>
<li><a href="https://www.htmlgoodies.com">Htmlgoodies</a></li>
<li><a href="http://www.css3.info">CSS3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
퍼가기전 출처 남김해주세요
'드림위버 이야기' 카테고리의 다른 글
| 워드프레스에서 네이버 블로그 지도 추가하는 방법- (0) | 2019.01.24 |
|---|---|
| 원클릭 팝업창 열고 닫기 (0) | 2019.01.11 |
| 워드프레스에서 만들기 기능 (0) | 2019.01.10 |
| footer(푸터) - 이메일 보내기 기능 넣기 (0) | 2019.01.10 |
| 아이프레임 링크 달기 (0) | 2019.01.10 |