2-depth nav using jquery

nav.css

/* global */
body {
  margin:0;
  padding:0;
  font: 12px/1.2 "돋움", dotum, sans-serif;
  background:#666;
}
/* header */
#header {
  width:800px;
  height:150px;
  margin:50px auto;
  background:#000;
  position:relative; /* 포지션의 기준점을 잡습니다. */
}
#nav {
  position:absolute; /* header를 기준으로 하단에 위치시킵니다. */
  left: 0;
  bottom:0;
}
#nav ul, #nav li {
  margin:0;
  padding:0;
}
#nav li {
  position:relative;
  list-style:none;
  float:left;
  margin-right:5px;
}
#nav a {
  display:block;
  padding: 1em 2em;
  font-weight:bold;
  text-decoration:none;
}
#nav li ul {
  position:absolute;
  top:3.5em;
  width: 300px;
  display:none; /* li의 자식인 ul을 숨겨둡니다. */
}
#nav li.on ul {
  display:block; /* 활성화된 li의 자식인 ul만 보여줍니다. */
}

/* color */
#header {background:#000;}
#nav a {background:#fff; color:#000;}
#nav .on a,
#nav li li a {background:#390; color:#fff;}

nav.html

<div id="header"><!-- 상단 박스를 만들고 -->
  <div id="nav"><!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
    <ul>
     <li class="on"><!-- 첫번째 1단 메뉴를 활성화 합니다. --> <a href="/">처음</a>
      <ul>
       <li><a href="#">메뉴</a></li>
       <li><a href="#">메뉴</a></li>
       <li><a href="#">메뉴</a></li>
     </ul>
   </li>
   <li><a href="#">갤러리</a>
    <ul>
     <li><a href="#">메뉴</a></li>
     <li><a href="#">메뉴</a></li>
     <li><a href="#">메뉴</a></li>
   </ul>
 </li>
 <li><a href="#">블로그</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
<li><a href="#">등록</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
<li><a href="#">소개</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
<li><a href="#">포럼</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
</ul>
</div><div id="header"><!-- 상단 박스를 만들고 -->
  <div id="nav"><!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
    <ul>
     <li class="on"><!-- 첫번째 1단 메뉴를 활성화 합니다. --> <a href="/">처음</a>
      <ul>
       <li><a href="#">메뉴</a></li>
       <li><a href="#">메뉴</a></li>
       <li><a href="#">메뉴</a></li>
     </ul>
   </li>
   <li><a href="#">갤러리</a>
    <ul>
     <li><a href="#">메뉴</a></li>
     <li><a href="#">메뉴</a></li>
     <li><a href="#">메뉴</a></li>
   </ul>
 </li>
 <li><a href="#">블로그</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
<li><a href="#">등록</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
<li><a href="#">소개</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
<li><a href="#">포럼</a>
  <ul>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
   <li><a href="#">메뉴</a></li>
 </ul>
</li>
</ul>
</div>
</div>
</div>

nav.js

$('#nav li').bind('mouseenter keyup', function() { // 메뉴바의 각 메뉴들에 마우스를 올리거나 키보드로 이동하면,
  $(this).addClass('on').siblings().removeClass(); // 해당 메뉴에 클래스 on을 추가하고, 다른 메뉴의 클래스를 제거합니다.
}); // 네. 3줄로 끝입니다.