안녕하세용.~~
필요하신분이 계실지 잘 모르겠지만,
제가 일반 소규모 홈페이지를 만들때 그냥 끼워넣어서 쓰는 소스입니다.

<style>
#menu {display:inline-block;width:700px;/* 메뉴의 너비 */}
#menu li {display:inline-block;width:25%;/* 1차메뉴 개수에 따라 %조절 */height:33px;/* 1차 메뉴바 높이 */float:left;text-align:center;}
#menu li ul {display:none;position:absolute;width:400px;margin-top:26px;/* 2차메뉴의 위치 - 1차메뉴 맨위에서 부터의 거리 */}
#menu li ul li {display:inline-block;width:auto;height:28px;/* 2차메뉴의 높이 */padding:0;text-align:center;}
#menu img {border:0px none;}
#menu .side {padding:0;}
#menu .submenu {padding:5px 8px 0 8px;background:url(서브메뉴 배경) x-repeat;}

/* -------------------------------------------
각 서브메뉴의 위치
기준 : 1차 메뉴의 맨 앞에서 부터의 거리로 계산
------------------------------------------- */
#menu .submenu1 {margin-left:-100px;}
#menu .submenu2 {margin-left:-100px;}
#menu .submenu3 {margin-left:-100px;}
#menu .submenu4 {margin-left:-100px}
</style>
<script language="javascript">
/* 만약 오픈 되어 있어야 하는 서브메뉴가 있을때 사용 */
//var old_menuid = 메뉴번호;
var old_viewid = 0;
function menu_view(viewid){
 if(viewid!=old_viewid){
  document.getElementById("submenu"+viewid).style.display="block";
  if(old_viewid!="0")document.getElementById("submenu"+old_viewid).style.display="none";
  old_viewid = viewid;
 }
}

function menu_hide(hideid){
 document.getElementById("submenu"+hideid).style.display="none";
 old_viewid = 0;
}
</script>

<div id="menu">
    <ul>
        <li onmouseover="javascript:menu_view(1);" onmouseout="javascript:menu_hide(1);">
            <a href="#"><img src="./common/menu_01.png" alt="1번메뉴"></a>
            <ul id="submenu1" class="submenu1" onmouseover="javascript:menu_view(2);" onmouseout="javascript:menu_hide(1);">
                <li class="submenu"><a href="#">1-1메뉴</a></li>
                <li class="submenu"><a href="#">1-2메뉴</a></li>
                <li class="submenu"><a href="#">1-3메뉴</a></li>
                <li class="submenu"><a href="#">1-4메뉴</a></li>
            </ul>
        </li>
       
        <li onmouseover="javascript:menu_view(2);" onmouseout="javascript:menu_hide(2);">
            <a href="#"><img src="./common/menu_02.png" alt="2번메뉴"></a>
            <ul id="submenu2" class="submenu2" onmouseout="javascript:menu_hide(2);">
                <li class="submenu"><a href="#">2-1메뉴</a></li>
                <li class="submenu"><a href="#">2-2메뉴</a></li>
                <li class="submenu"><a href="#">2-3메뉴</a></li>
                <li class="submenu"><a href="#">2-4메뉴</a></li>
            </ul>
        </li>
       
        <li onmouseover="javascript:menu_view(3);" onmouseout="javascript:menu_hide(3);">
            <a href="#"><img src="./common/menu_03.png" alt="3번메뉴"></a>
            <ul id="submenu3" class="submenu3" onmouseout="javascript:menu_hide(3);">
                <li class="submenu"><a href="#">3-1메뉴</a></li>
                <li class="submenu"><a href="#">3-2메뉴</a></li>
                <li class="submenu"><a href="#">3-3메뉴</a></li>
                <li class="submenu"><a href="#">3-4메뉴</a></li>
            </ul>
        </li>
       
        <li onmouseover="javascript:menu_view(4);" onmouseout="javascript:menu_hide(4);">
            <a href="#"><img src="./common/menu__04.png" alt="4번메뉴"></a>
            <ul id="submenu4" class="submenu4" onmouseout="javascript:menu_hide(4);">
                <li class="submenu"><a href="#">4-1메뉴</a></li>
                <li class="submenu"><a href="#">4-2메뉴</a></li>
                <li class="submenu"><a href="#">4-3메뉴</a></li>
                <li class="submenu"><a href="#">4-4메뉴</a></li>
            </ul>
        </li>
    </ul>
</div>