css를 이용한 2차 메뉴입니다.

<div id="wrapper">
 <div id="headerMain">
 <nav id="headerNavi">
 <ul id="mainNavi">
  <li id="">
  <a href="#">메뉴 1</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 2</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 3</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 4</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 5</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
 </ul>
 </nav>
 </div
</div>

 

@charset "utf-8";

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, figure, fieldset, input, th, td{
 margin:0;padding:0;
}

/*기본 font 설정*/
body{
 font-size:0.75em;
 font-family:돋움,dotum,굴림,gulim,arial;
 color:#414042;  
}

a{ color:#414042;text-decoration:none; }
a:hover{ color:#414042;text-decoration:none; }
a:focus{ color:#414042;text-decoration:none; }
a:active{ color:#414042;text-decoration:none; }

/* 메인메뉴 */
#mainNavi{
 list-style:none;
}
#mainNavi > li{
 float:left;
}
#mainNavi > li  a{
 display:block;
 padding-left:30px;
 padding-right:30px;
 width:100px;
 
 border:2px solid #ccc;
 font-size:1.2em;
 /* font-family:"Lucida Sans Unicode", "Lucida Grande", "sans-serif"; */
 font-weight:800;
 color:#fff;
 text-align:center;
 vertical-align:middle;
 overflow:hidden;
 
 /* 단추 색상과 그림자 스타일*/
 background-color:#ff9900;
 border-top-color:#ff6633;
 border-bottom-color:#ff6633;
 border-left-color:#ff6633;
}
#mainNavi li a:hover{
 color:#000;
}

#mainNavi li ul{
 opacity:0;
 position:absolute;
 width:160px;
 list-style-type:none;
}
#mainNavi li:hover ul{
 opacity:1;
}
#mainNavi li ul li{
 height: 0;
 line-height:0;
}
#mainNavi li:hover ul li{
 height:24px;
 line-height:20px;
}
#mainNavi li ul li a{
}
#mainNavi li ul li a:hover{
}