HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> gnb</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/common3.js"></script>
<link rel="stylesheet" href="css/common3.css">
</head>
<body>
<header id="header">
<div>
<!-- 최대너비 1763, 문서가운데 위치, 하단 보더 1, relative -->
<h1 class="logo p_a">
<a href="index.html"><img src="../images/common/logo.png" alt="한화생명 리즈"></a>
</h1>
<nav id="gnb">
<h2 class="blind_b">주메뉴</h2>
<ul>
<li>
<a href="">About</a>
<ul>
<li><a href="#">브랜드 스토리</a></li>
<li><a href="#">역할 및 서비스</a></li>
</ul>
</li>
<li>
<a href="#">Program</a>
<ul>
<li><a href="#">Career</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
<li>
<a href="#">Recruit</a>
<ul>
<li><a href="#">LG 선발 프로세스</a></li>
<li><a href="#">지원하기</a></li>
</ul>
</li>
<li>
<a href="#">Q&A</a>
<ul>
<li><a href="#">자주 묻는 질문</a></li>
</ul>
</li>
</ul>
</nav>
<a href="#" class="util p_a borderbox">지원하기</a>
</div>
</header>
</body>
</html>css
@charset "utf-8";
@font-face{
font-family: NtSansKR;
font-weight: 300;
font-style: normal;
src:url("../../../../web/fonts/NotoSansKR-DemiLight.eot");
src:url("../../../../web/fonts/NotoSansKR-DemiLight.eot#irfix") format("embedded-opentype"),
url("../../../../web/fonts/NotoSansKR-DemiLight.woff2") format("woff2"),
url("../../../../web/fonts/NotoSansKR-DemiLight.woff") format("woff"),
url("../../../../web/fonts/NotoSansKR-DemiLight.otf") format("opentype");
}
/* tag reset */
body,h1,h2,ul,li{margin: 0;padding: 0;}
h1,h2{font-size: 100%;}
ul{list-style:none;}
header,nav{display: block;}
img{border:none;vertical-align: top;}
a:link,a:visited,a:hover,a:active{text-decoration: none;color: inherit;}
/* common class */
.blind_b{width: 1px;height: 1px;overflow: hidden;border:none;position: absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);}
.p_a{position: absolute;}
.borderbox{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#header.active::before{content: "";position: absolute;top: 70px;left: 0;width: 100%;height: 49px;background: pink;}
body{font-family: NtSansKR;font-weight: 300;font-size: 17px;color: #333;}
#header{width: 100%;}
#header > div{border-bottom: 1px solid #aaa;height: 69px;}
.logo{top: 15px;left:0;}
.util{top: 18px;right: 0;width: 100px;height: 34px;text-align: center;border: 2px solid #f15b47;}
#gnb{text-align: center;height: 69px;}
#gnb a{display: block;}
#gnb>ul>li{display: inline-block;position: relative;}
#gnb>ul>li+li{margin-left: 73px;}
#gnb>ul>li>a{height: 69px;line-height: 69px;border-bottom: 2px solid transparent;}
#gnb>ul>li:hover>a,#gnb>ul>li.on>a,#gnb>ul>li>a:focus{color: #f15b47;border-bottom-color: #f15b47;}
#gnb ul li ul{display: none;position: absolute;top: 69px;left: 0;width: 250px;height: 49px;}
#gnb ul li ul li{float: left;}
#gnb ul li ul li+li{margin-left: 36px;}
#gnb ul li ul li a{font-size: 14px;color: #888;height: 49px;line-height: 49px;padding-top: 1px;}
#gnb ul li ul li:hover a,#gnb ul li ul li a:focus{color: #333;}
Javascript
$(document).ready(function(){
//1.변수선언
var _gnb = $('#gnb>ul');
//depth2 ul숨기기
_gnb.find('li ul').hide();
/*
2. _gnb를 기준으로 a를 찾아서 mouseenter,focus이벤트 =>
1. 초기화 : li.on제거 후 아들래미 ul숨기기
2. 이벤트 발생한 a의 베프 ul 보여주고 부모님에게 클래스 on추가
3. #header에 하얀배경색을 생성하기 위한 클래스 active추가
*/
_gnb.find('>li>a').on('mouseenter focus',function(){
_gnb.find('li.on').removeClass('on').children('ul').hide();
$(this).next().show().parent().addClass('on');
$('#header').addClass('active');
});
/*
3. _gnb에서 마우스가 떠났을 때
- 초기화 : 모든 li에 클래스on제거, 아들래미 숨기기
- #header에 .active제거
*/
_gnb.on('mouseleave',function(){
$(this).find('>li.on').removeClass('on').children('ul').hide();
$('#header').removeClass('active');
});
/*
_gnb의 첫번째 a,마지막 a에서 포커스가 없어짐
=> 어디로 갔는지 잠시 텀을 주고 찾는다.
gnb안에 a에 포커스된게 없으면 mouseleve이벤트 강제실행
*/
_gnb.find('a:first, a:last').on('blur',function(){
setTimeout(function(){
if(!$('_gnb a').is(':focus')){
_gnb.trigger('mouseleave');
}
},10);
});
drop the bit 0 and 1