제가 원하는 메뉴는 마우스를 올리면 슬라이드 다운으로 하위 카테고리가 보여지고 마우스를 떼면은 2~3초 정도 있다가 하위 메뉴가 슬라이드업되는 메뉴를 만들고 있습니다.

현재 소스에 드롭다운 메뉴를 사용하는데 문제점은

1. 시작과 동시에 아래의 (붉은색) 소스가 있어야 작동을 합니다. 그래도 좋은데 3초후에 자동으로 사라졌으면 합니다. 아니면 처음에는 안나타나게 하던가요.

2. 카테고리에 마우스를 올리면 해당 하위 메뉴만 나왔으면 합니다. 지금은 전체 하위 카테고리가 다 보여지네요.

조언 부탁드립니다.

감사합니다.

 <script>

$('ul li:has(ul)').addClass('has-submenu');
$('ul li ul').addClass('sub-menu').slideDown(1000);
$('ul li').hover(function () {
$('ul li').mouseenter('sub-menu').fadeIn(1000);
$('ul li ul.bb').show('ul li ul.bb').fadeIn(1000);
$('ul li ul').mouseleave(function(){ //마우스가 벗어났을 때
     setTimeout(function(){
   $('ul li ul.bb').slideUp(1000);
   },2000)
    
    })
});

</script>

<style>

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
html,body,h1,h2,h3,h4,h5,h6,p,table,tr,td, div { color: black; text-decoration: none; font-family: 'Nanum Gothic', sans-serif; line-height : 16pt; font-size: 10pt; vertical-align: center; margin: 0;padding: 0;}

nav { max-width: 900px;font-family: 'Nanum Gothic', sans-serif;}

.nav_wrapper {
  position: fixed;
  font-family: 'Nanum Gothic', sans-serif;
  left: 0;
  top: 0;
  width: 100%;
  transition: top .5s ease-out;
  background: #fff;
 
}

main {
font-family: 'Nanum Gothic', sans-serif;
  max-width: 900px;
  margin: 0 auto;
}

main p {  1.2em;
font-family: 'Nanum Gothic', sans-serif;
}

.menu {
  width: 100%;
  font-family: 'Nanum Gothic', sans-serif;
  height: auto;
  background: #fff;
  transition: all 0.3s ease;
  float:right;
  z-index: 9999;
}

.menu ul {
font-family: 'Nanum Gothic', sans-serif;
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-block;
  float:right;z-index: 9999;
}

.menu > li > ul.sub_menu {
font-family: 'Nanum Gothic', sans-serif;
  min-width: 10em;
  padding: 4px 0;
  background-color: #f4f4f4;
  border: 1px solid #fff;
  z-index: 9999;
}

.menu ul li { padding: 0px;font-family: 'Nanum Gothic', sans-serif;}

.menu > ul > li { display: inline-block;font-family: 'Nanum Gothic', sans-serif;}

.menu ul li a {
font-family: 'Nanum Gothic', sans-serif;
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
}
/*상단메뉴*/
.menu ul li a:hover {
font-family: 'Nanum Gothic', sans-serif;
  background: #aa1515;
  color: #fff;
}

.menu ul li.hover > a {
font-family: 'Nanum Gothic', sans-serif;
  background: #aa1515;
  color: #fff;
}

.menu ul li > a { padding: 10px; width:130px; text-align:center;background: #363e57;font-family: 'Nanum Gothic', sans-serif;}

.menu ul li.red > a { padding: 10px; width:130px; text-align:center;background: #aa1515;font-family: 'Nanum Gothic', sans-serif;}

.menu ul ul {
font-family: 'Nanum Gothic', sans-serif;
  display: none;
  position: absolute;
  top: 100%;
  min-width: 150px;
  background: #484f55;
}
/*끝*/
.menu ul li:hover > ul { display: block;font-family: 'Nanum Gothic', sans-serif; }

.menu ul ul > li { position: relative; font-family: 'Nanum Gothic', sans-serif;}
/*서브메뉴*/
.menu ul ul > li a {
font-family: 'Nanum Gothic', sans-serif;
  padding: 10px 10px;
  font-size: 12px;
  height: auto;
  background: #555d64;
   border-bottom: 1px dashed #333333;
}

.menu ul ul > li a:hover {
font-family: 'Nanum Gothic', sans-serif;
  background: #0d4da1;
  color: #fff;
}
/*끝*/
.menu ul ul ul {
font-family: 'Nanum Gothic', sans-serif;
  position: absolute;
  left: 100%;
  top: 0;
}

#hero {
  width: 100%;
  height: auto;
  background: #e8ebf0;
  margin: 70px 0 20px 0;
}

#hero img {
  width: 100%;
  height: auto;
}

footer {
  width: 100%;
  background: #0099cc;
  padding: 10px;
  color: #fff;
  margin-top: 40px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

</style>

<!--여기-->
  <nav id="menu" class="menu">
    <ul class="dropdown">
      <li class="red"><a href='#' title="회사소개" class="1">회사소개</a>
        <ul class="bb">
          <li><a href="#" title="인사말">인사말</a></li>
         </ul>
      </li>
      <li><a href='#' title="제품소개">제품소개</a>
        <ul class="bb">
          <li><a href="#" title="제품소개">제품소개</a></li>
         
        </ul>
      </li>
      <li ><a href='#' title="기술연구소">기술연구소</a>
        <ul class="bb">
           <li><a href="#" title="기술연구">기술연구</a></li>
        </ul>
      </li>
      <li ><a href='#' title="DATA LIBRARY">DATA LIBRARY</a>
        <ul class="bb">
          <li><a href='#' title="E-Catalogue">E-Catalogue</a></li>
    
        </ul>
      </li>
      <li><a href="#" title="고객지원">고객지원</a>
        <ul class="bb">
          <li><a href="#" title="공지사항">공지사항</a></li>
          
        </ul>
      </li>
      </ul>
  </nav>
<!--끝-->