drop down menu

by Kim Ara

HTML

<div id="header">
	<div cla1ss="container">
		<h1 class="logo"><a href="index.asp" onClick="fnGaTrack('gnb_home','gnb_home','gnb_home');fnTrkEvtClick('gnb_home','gnb_home_w');"><img src="./images/logo.png" alt="불가리아 위쎈" /></a></h1>
		<div class="gnb">
			<ul>
				<li><a href="index.asp" onClick="fnGaTrack('gnb_main','gnb_main_w','gnb_main_w');fnTrkEvtClick('gnb_main','gnb_main_w');" class="gnb-01">MAIN</a></li>
				<li><a href="product_01.asp" onClick="fnGaTrack('gnb_prod','gnb_prod_w','gnb_prod_w');fnTrkEvtClick('gnb_prod','gnb_prod_w');" class="gnb-02">제품소개</a></li>

				<!-- 2018-02-20 추가 -->
				<li><a href="#none" class="gnb-06">위산정복 프로젝트</a></li>
				<li class="health_nav">
					<a href="#none" class="gnb-07">위 건강 프로젝트</a>
					<ul class="sub_gnb" style="display:none">
						<li>
							<a href="event_hungry.asp" onClick="fnGaTrack('gnb_project1','gnb_project1_w','gnb_project1_w');fnTrkEvtClick('gnb_project1','gnb_project1_w');">위 건강 프로젝트 <span class="co_green">#</span><span class="co_green num_bold">1</span></a>
						</li>
						<li>
							<a href="event_02.asp" onClick="fnGaTrack('gnb_project2','gnb_project2_w','gnb_project2_w');fnTrkEvtClick('gnb_project2','gnb_project2_w');">위 건강 프로젝트 <span class="co_green">#</span><span class="co_green num_bold">2</span></a>
						</li>
						<li class="last_nav">
							<a href="event_03.asp" onClick="fnGaTrack('gnb_project3','gnb_project3_w','gnb_project3_w');fnTrkEvtClick('gnb_project3','gnb_project3_w');">위 건강 프로젝트 <span class="co_green">#</span><span class="co_green num_bold">3</span></a>
						</li>
					</ul>
				</li>
				<!-- //2018-02-20 추가 -->

			</ul>
		</div>
	</div>
</div>

CSS

#header {height:83px;background:#fff;border-bottom:1px solid #d8d9dd}
#header.event1 {height:84px;background:url("../images/event1/bg-header-event.png") top center repeat-x}
#header .logo {float:left;padding-left:80px}
#header .gnb {float:right;padding-right:50px;margin-rig1ht:-40px}
#header .gnb ul{/* overflow:hidden; */height:84px;}
#header .gnb ul li{position:relative;float:left}
#header .gnb ul li a{display:block;height:83px;font-size:0}

   
   
   #header .gnb ul li a.gnb-06 {
      width: 176px;
      background: url("../images/gnb-06.png") 0 0 no-repeat
   }
   
   #header .gnb ul li a.gnb-06:hover,
   #header .gnb ul li a.gnb-06.on {
      background: url("../images/gnb-06-on.png") 0 0 no-repeat
   }
   
   #header .gnb ul li a.gnb-07 {
      width: 169px;
      background: url("../images/gnb-07.png") 0 0 no-repeat
   }
   
   #header .gnb ul li a.gnb-07:hover,
   #header .gnb ul li a.gnb-07.on {
      background: url("../images/gnb-07-on.png") 0 0 no-repeat
   }
   
   #header .gnb ul.sub_gnb {
      overflow: visible;
      position: absolute;
      top: 83px;
      left: 0;
      width: 150px;
      height: auto;
      z-index: 10;
      box-shadow: 7px 7px 15px -5px rgba(0, 0, 0, 0.1)
   }
   
   #header .gnb ul.sub_gnb li {
      width: 150px;
      height: 60px;
      background: #fff;
      position: relative
   }
   
   #header .gnb ul.sub_gnb li:after {
      content: '';
      width: 120px;
      height: 1px;
      background: #5e686c;
      position: absolute;
      opacity: 0.2;
      left: 10%;
      z-index: 10;
      bottom: 0
   }
   
   #header .gnb ul.sub_gnb li.last_nav:after {
      content: '';
      width: 0
   }
   
   #header .gnb ul.sub_gnb li a {
      font-size: 14px;
      height: auto;
      line-height: 60px;
      text-align: center;
      font-weight: 500;
      color: #000
   }
   
   #header .gnb ul.sub_gnb li a:hover,
   #header .gnb ul.sub_gnb li a.on {
      background: #fbda75;
      color: #0d7045;
     ...