아래 소스는 옥션의 메뉴와 같이 하위메뉴를 보여주는 샘플소스.
------------------------------------------------------------------------------
<style>
table{
font-size:9pt;
font-family:"arial";
}
</style>
<!-------------------------------------->
<script type="text/javascript">
var TimeOut = 300;
var currentLayer = null;
var currentitem = null;
var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;
// Open Hidden Layer
function mopen(n)
{
var l = document.getElementById("menu"+n);
var mm = document.getElementById("mmenu"+n);
if(l)
{
mcancelclosetime();
l.style.visibility='visible';
if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';
currentLayer = l;
currentitem = mm;
currentLayerNum = n;
}
else if(currentLayer)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}
// Turn On Close Timer
function mclosetime()
{
closeTimer = window.setTimeout(mclose, TimeOut);
}
// Cancel Close Timer
function mcancelclosetime()
{
if(closeTimer)
{
window.clearTimeout(closeTimer);
closeTimer = null;
}
}
// Close Showed Layer
function mclose()
{
if(currentLayer && noClose!=1)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
}
else
{
noClose = 0;
}
currentLayer = null;
currentitem = null;
}
// Close Layer Then Click-out
document.onclick = mclose;
</script>
<style>
#dd
{ margin: 0;
padding: 0}
#dd li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#dd li a.menu
{ display: block;
text-align: center;
background: #BB0A0A; /*메뉴 바탕색*/
padding: 4px 10px;
margin: 0 1px 0 0;
color: #FFF;
width: 145;
height: 20px;
text-decoration: none}
#dd li a.menu:hover
{ background: #FF0000}
.submenu2
{ background: #EAEBD8;
border: 1px solid #13000A;
visibility: hidden;
position: absolute;
z-index: 3;
width: 155px;}
.submenu2 a
{ display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
padding: 5px;
color: #13000A}
.submenu2 a:hover
{ background: #FF0000;
color: #FFF}
.submenu3
{ background: #EAEBD8;
border: 1px solid #13000A;
visibility: hidden;
position: absolute;
z-index: 3;
width: 155px;}
.submenu2 a
{ display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
padding: 5px;
color: #13000A}
.submenu2 a:hover
{ background: #FF0000;
color: #FFF}
</style>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>
<table cellpadding=0 cellspacing=0 border=0 width=100%><tr><td><table cellpadding=0 cellspacing=0 border=0 width=1050><tr><td >
<ul id="dd">
<li>
<a href="/racing/about/about_1.asp" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">패션 브랜드 뷰티</a>
<div class="submenu2" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
<a href="#">BRAND+</a>
<a href="#">THE SOHO#</a>
<a href="#">여성의류</a>
<a href="#">남성의류</a>
<a href="#">빅사이즈/시니어</a>
<a href="#">언더웨어/잠옷</a>
<a href="#">신발/구두/운동화</a>
<a href="#">가방/패션잡화</a>
<a href="#">국내화장품</a>
<a href="#">해외화장품/향수</a>
<a href="#">쥬얼리/시계</a>
</div>
</li>
<li><a href="/racing/race_card.asp" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">식품 유아용품 </a>
<div class="submenu2" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
<a href="#">쌀/과일/농수축산물</a>
<a href="#">건강식품/다이어트</a>
<a href="#">음료/과자/가공식품</a>
<a href="#">기저귀/분유/이유식</a>
<a href="#">물티슈/생리대/성인패드</a>
<a href="#">출산/유아동/임부복</a>
<a href="#">장난감/교육완구/인형</a>
<a href="#">유아동의류/신발/가방</a>
</div>
</li>
<li><a href="/racing/jockey/ja_lank.asp" class="menu"id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">가구 생활 취미</a>
<div class="submenu2" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
<!-- <a href="/racing/jockey/ja_01.asp">Jockey's Profile</a>
<a href="/racing/tra/tra_01.asp">Trainer's Profile</a>-->
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</li>
<li><a href="/racing/horse/horse_info.asp" class="menu"id="mmenu5" onmouseover="mopen(5);" onmouseout="mclosetime();">디지털 가전 컴퓨터</a>
<div class="submenu2" id="menu5" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</li>
</ul>
</td></tr></table></td><td valign=top width=100%><img src=/racing/racing_img/top_3.jpg height=22 width=100%></td></tr></table>
[출처] 자바스크립트로 상단 메뉴바 구성 (하위메뉴 보이기)|작성자 샤프가이