点击打开导航菜单

下面为效果显示

点击打开菜单

脚本说明:
把如下代码加入<body>区域中
<STYLE type=text/css>
.menu {
	BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #40a0c0
}
A.menuItem {
	BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 0px solid; DISPLAY: block; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #000000 0px solid; CURSOR: default; COLOR: #ffffff; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: MS Sans Serif, Arial, Tahoma,sans-serif; TEXT-DECORATION: none
}
A.menuItem:hover {
	COLOR: #ffff00; BACKGROUND-COLOR: #004060
}
</STYLE>
<DIV class=menu id=myMenu><A class=menuItem 
      href="http://www.7stk.com">网页特效代码</A> 
      <A class=menuItem 
      href="http://www.sina.com.cn">新浪网</A> 
      <A class=menuItem 
      href="http://www.163.com">网 易</A> 
      <A class=menuItem 
      href="http://www.7stk.com/fine/index.htm">精彩网页分享</A> 
      <A class=menuItem 
      href="http://www.7stk.com/music/music.htm">音乐播放器</A> 
      </DIV>
<P><font onclick="openMenu(event, 'myMenu');return false;">点击打开菜单</font></P>
<SCRIPT type=text/javascript>

document.getElementById("myMenu").onmouseout = closeMenu;

function openMenu(event, id) {

var el, x, y;

el = document.getElementById(id);
  if (window.event) {
    x = window.event.clientX + document.documentElement.scrollLeft
                             + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop +
                             + document.body.scrollTop;
  }
  else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  x -= 2; y -= 2;
  el.style.left = x + "px";
  el.style.top  = y + "px";
  el.style.visibility = "visible";
}

function closeMenu(event) {

var current, related;

if (window.event) {
    current = this;
    related = window.event.toElement;
  }
  else {
    current = event.currentTarget;
    related = event.relatedTarget;
  }

if (current != related && !contains(current, related))
    current.style.visibility = "hidden";
}

function contains(a, b) {

// Return true if node a contains node b.

while (b.parentNode)
    if ((b = b.parentNode) == a)
      return true;
  return false;
}

</SCRIPT>