ต้องการให้เมนูค่อยๆหายอะครับปกติเราเอาเม้าไปชี้แล้วพอเอาออกจะหายเลยแต่ผมอยากให้เมื่อเลื่อนเม้าออกมาแล้ว5วิถึงหายอะครับรบกวนทีคับ

.header .primary {
  margin-top: 7px;
}
.header .primary .navbar {
  margin: 0 0 0 1px;
}
.header .primary .navbar .nav {
  float: none;
  margin: 0;
}
.header .primary .navbar .nav > li {
  padding: 0 4px;
  position: relative;
}
.header .primary .navbar .nav > li > a,
.header .primary .navbar .nav > li > a:visited {
  border-width: 1px;
  border-color: #fff;
  border-color: transparent;
  color: #1e1e1e;
  padding: 11px 15px;
  text-shadow: none;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.header .primary .navbar .nav > li:hover > a {
  background: #fff;
  border-color: #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
  box-shadow: 0 0 5px rgba(0,0,0,.15);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.header .primary .navbar .nav .parent {
  position: relative;
}
.header .primary .navbar .nav > li.parent:hover > a {
  background: #fff;
  border-bottom-color: transparent;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.header .primary .navbar .nav > li.parent:hover > a:after {
  background: #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 10px;
  left: 5px;
  margin: 0 0 -3px 0;
  position: absolute;
  right: 5px;
  z-index: 49;
}
.header .primary .sub {
  background: #fff;
  border: 1px solid #ccc;
  -webkit-border-radius: 0 3px 3px 3px;
  -moz-border-radius: 0 3px 3px 3px;
  border-radius: 0 3px 3px 3px;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
  box-shadow: 0 0 5px rgba(0,0,0,.15);
  display: none;
  font-size: 13px;
  line-height: 24px;
  padding: 15px 20px;
  position: absolute;
  z-index: 48;
}
.header .primary .sub li {
  font-size: 13px;
  line-height: 24px;
  
}
.header .primary .parent:hover > .sub {
  display: block;
  -webkit-animation: fadeIn .7s;
  animation: fadeIn .7s;
}
.header .primary .sub a,
.header .primary .sub a:visited {
  color: #1e1e1e;
  display: block;
  text-decoration: none;
  width: 175px;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
}
.header .primary .sub a:hover {
  opacity: .6;
  filter: alpha(opacity=60);
  background: #33FFCC;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
}
.header .primary .sub .sub {
  left: 100%;
  top: 0;
}

 <li class="parent">
				<a href="<?=PATH_URL?>/ผลิตภัณฑ์"  title="<?=$meta['a_title']?>">ผลิตภัณฑ์</a>
				
				<?php
			
				$sql = "SELECT DISTINCT `cate_id` FROM ".TBL_PRODUCT." WHERE 1 AND `active`='Y';";
				$query = mysqli_query($oconn,$sql);
				$arr_cate2=array();
				while($row=mysqli_fetch_assoc($query)){
					$arr_cate2[] = $row['cate_id'];
				}mysqli_free_result($query);

				?>
				<?php
				$sql = "SELECT DISTINCT `category_id` FROM ".TBL_BRAND." WHERE 1 AND `active`='Y'";
				$query = mysqli_query($oconn,$sql);
				$arr_cate=array();
				while($row=mysqli_fetch_assoc($query)){
					$arr_cate[] = $row['category_id'];
				}mysqli_free_result($query);
				
				if(count($arr_cate && arr_cate2)>0){

				?>
					<ul class="sub">

					<?php
					foreach( $arr_cate as $key ){
						
						$cate = get_productCate($key);
						//$cate2 = get_productBrand2($key);
					?>
						<li class="parent"><a href="javascript:;"  title="<?=$meta['a_title']?>"><?=$cate['name']?></a>
							<ul class="sub">
							<?php
							$sql2 = "SELECT `id`,`Brand_name` FROM ".TBL_BRAND." where `active`='Y' and `category_id`='".$key."' ORDER BY `Brand_name` ASC;";
							$query2 = mysqli_query($oconn,$sql2);
							while($row2=mysqli_fetch_assoc($query2)){
							?>
							<li class="parent"><a href="javascript:;"  title="<?=$meta['a_title']?>"><?=$row2['Brand_name']?></a>
							
						
							<ul class="sub">
					
							<?php
							if($row2['id'] =='8'){
								
			  $sql = "SELECT `partner`,`logo`,webpartner FROM ".TBL_PARTNER." WHERE `partner`='STAHLWILLE' ORDER BY `partner` ASC;";
			  $query = mysqli_query($oconn,$sql);
			  while($row=mysqli_fetch_assoc($query)){
			echo "<div class='span2'>";
			echo "<a href='".$row['webpartner']."'>";
echo "<img src='".PATH_URL."/content/upload/partner/".$row['logo']."' onclick='location.href=".$row['webpartner']."' class='img-rounded' width='170' height='170' alt='".$row['partner']."'>";
echo "</a>";
			echo "</div>";
			  }mysqli_free_result($query);
							}
							$sql = "SELECT `id`,`name` FROM ".TBL_PRODUCT." WHERE `active`='Y' AND `cate_id`='".$key."' AND `b_id`= '".$row2['id']."' ORDER BY `name` ASC;";
							$query = mysqli_query($oconn,$sql);
							while($row=mysqli_fetch_assoc($query)){
							?>

							<li><a href="<?=PATH_URL?>/ผลิตภัณฑ์/<?=$row['id']?>-<?=str_replace(" ","_",$row['name'])?>.html"   title="<?=$meta['a_title']?>"><?=$row['name']?></a></li>
							<?php
							}mysqli_free_result($query);
							?>
							
							</ul>
								<?php
							}mysqli_free_result($query2);
							?>
							</li>
							</ul>
						</li>
					<?php
					}
					?>
					
					</ul>
					
				<?php
				}
				?>
							
			  </li>

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}