<style>
<!--
.move
{
<!--
 ## Title 부분 ##
가로 크기
배경색
Title과 Menu 경계선 색
글자크기
글자체
글자색
글자정렬
글자 속성
//-->
 width:100%;
 background-color:#99CCFF;
 border-bottom:1px solid blue;
 font-size:14px;
 font-family:vardana;
 color:"#ff0000";
 text-align:center;
 font-weight:bold;
}
.info
{
<!--
 ## 하단 설명 부분 ##
가로크기
배경 색
설명과 메뉴부분 경계선 색
글자크기
글자 체
글자 색
//-->
 width:100%;
 background-color:#99CCFF;
 border-top:1px solid blue;
 font-size:13px;
 font-family:vardana;
 color:"#000000";
}
.panel
{
 width:150;
 position:absolute;
 border:1px solid blue;
 left:150;
 top:150;
 font-size:13px;
 font-family:vardana;
<!--
 ## 메뉴 부분 ##
가로크기
레이어 소스
바깥 테두리 색
레이어 left 위치
레이어 top 위치
글자 크기
글자 체
//-->
}
<!--
해당 사이트 방문 후 글자 색
기본 링크의 장식(밑줄 그을건지 정하는거)과 글자 색
마우스 올렸을시 밑줄 그어짐
//-->
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}

#panel a.visited{
text-decoration:none;
}
.menu
{
<!--
 ## 메뉴 부분 ##
가로크기
배경 색
글자 크기
글자 체
//-->
 width:100%;
 background-color:lightyellow;
 font-size:13px;
 font-family:vardana;
}
//-->
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
N = (document.all) ? 0 : 1;
var ob;
var over = false;

function MD(e) {
if (over){
if (N) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
      }
  }
}

function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
      }
  }
}

function MU() {
ob = null;
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
//-->
</script>

<div id="panel"  class="panel" >
<script language="JavaScript">
<!--
var menutitle='Example Menu'; // 메뉴 타이틀
var menutarget='_blank'; // 메뉴 타겟

function getArray(id){
  var splitarray = link[id].split("|"); // 메뉴 구성 부분에서 타이틀과 경로 설명을 구분하는 것
  return splitarray;
}

function info(i,obj,col){
 sublink = getArray(i);
 infobar = document.getElementById("infob");
 infobar.innerHTML = "<img src='../../../kjy/jaslink/pointer2.gif'>  "+sublink[2]; // 마우스 오버 부분
 obj.style.backgroundColor=col;
}

function endi(obj,col){
 obj.style.backgroundColor=col;
 infobar = document.getElementById("infob");
 infobar.innerHTML = "<img src='../../../kjy/jaslink/pointer2.gif'> <br>"; // 마우스 아웃 부분
}

var link = new Array();
// 메뉴 구성 부분
// 추가시는 아래 메뉴로 사용되는 부분을 하나 복사하여
// X부분의 숫자만 차례대로 바꿔주면 됨
// 메뉴 구성 순서 : link[X] = "타이틀|경로|설명";
link[0] = ".HAPPYSCRIPT | http://www.happyscript.net | Happyscript.net";
link[1] = ".YAHOO | http://www.yahoo.co.kr | Yahoo.co.kr";
link[2] = ".HAPPYSCRIPT | http://www.happyscript.net | Happyscript.net";
link[3] = ".LYCOS | http://www.lycos.co.kr | Lycos.co.kr";
link[4] = ".HAPPYSCRIPT | http://www.happyscript.net | Happyscript.net";

document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'>"+menutitle+"</div><div class='menu'><br></div>");
for(i=0;i<link.length;i++){
sublink = getArray(i);
document.write("<a href='"+sublink[1]+"' target='"+menutarget+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'>  "+ sublink[0] +"</div></a>");
}
document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='../../../kjy/jaslink/pointer2.gif'> <br></div>"); // 이미지 경로
//-->
</script>
</div>
<b> Img D/N </b><br>
(이미지가 작아서 일부러 늘렸음)<br>
<img src="../../../kjy/jaslink/pointer2.gif" width="50" height="50" border="1">

[출처] happyscript
http://www.happyscript.net