<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 시작</title>
<!-- 외부 style -->
<link rel="stylesheet" href="css/nav_ex.css">
<!-- 외부 script -->
</head>
<body>
<div class="full-container nav">
<nav id="gnb">
<ul>
<li><a href="#">페이스케어</a>
<div class="drop-down">
<ul>
<li><a href="#">페이스케어1-1</a></li>
<li><a href="#">페이스케어1-2</a></li>
<li><a href="#">페이스케어1-2</a></li>
<li><a href="#">페이스케어1-2</a></li>
<li><img src="images/pdslider1.jpg" width="90%"></li>
</ul>
</div>
</li>
<li><a href="#">바디케어</a></li>
<li><a href="#">헤어케어</a></li>
<li><a href="#">맘&베이비</a></li>
<li><a href="#">립스틱</a></li>
</ul>
</nav>
</div>
</body>
</html>
@charset "utf-8";
a{
color:#333333;
text-decoration:none;
}
a{
color:orange;
}
.full-container{
width:100%;
position:relative;
margin-top:50px;
background:black;
}
#gnb{
width:100%;
max-width:1400px;
margin:0 auto;
position:relative;
z-index:999999;
}
#gnb>ul{
width:100%;
list-style:none;
padding:0; margin:0;
background:black;
text-align:center;
}
#gnb>ul>li{
display:inline-block;
width:15%;
position:relative;
}
#gnb>ul>li>a{
display:block;
width:100%;
padding:15px 0;
font-size:1.5em;
color:white;
}
#gnb>ul>li>a:hover{
background:darkred;
}
.drop-down{
position:absolute;
background:#333333;
width:100%;
text-align:left;
text-indent:10px;
display:block;
}
.drop-down>ul{
list-style:none;
padding:0; margin:0;
}
.drop-down>ul>li{
padding:0 10px;
box-sizing:border-box;
}
.drop-down>ul>li>a{
display:block;
color:white;
padding:10px 0;
border-bottom:1px dotted white;
}
.drop-down>ul>li:last-child>a{
border-bottom:0;
}
.drop-down>ul>li:last-child{
padding:10px;
}
$(document).ready(function(){
$("#gnb>ul>li>a").click(function(){
$(".drop-down:visible").fadeOut();
$(this).parent().find(".drop-down").fadeIn();
});
$(document).mouseup(function(e){
if($(e.target).parents("#gnb>ul").length==0){
$(".drop-down").fadeOut();
}
});
});