求一个菜单，有的是分呀，只要好使

参考：
http://blog.csdn.net/dh20156/archive/2005/12/13/551620.aspx
1.将下面的代码复制到 <head> 内
<script language="JavaScript" src="include/menu.js"></script>  //这里的路径　你要自己定义了，看看要不要include/
<link rel="stylesheet" type="text/css" href="include/menu.css"> //这里的路径　你要自己定义了，看看要不要include/2.body里的内容
<href="#" onMouseOver="expandMenu(null,'menuSimple',10,120);">Simple</a> 
<div id="menuSimple" class="menu" onMouseOut="hideMe();"> //创建菜单 menuSimple
<a href="#" onMouseOver="expandMenu('menuSimple');">Menu Item 1</a><br> //菜单的栏目
<a href="#" onMouseOver="expandMenu('menuSimple');">Menu Item 2</a><br>
<a href="#" onMouseOver="expandMenu('menuSimple');">Menu Item 3</a><br>
<a href="#" onMouseOver="expandMenu('menuSimple','menuSimpleSub01');">Menu Item 4 ></a><br> 如果还有子菜单的话，要给出子菜单的名字 menuSimpleSub01
</div><div id="menuSimpleSub01" class="menu" onMouseOut="hideMe();"> //创建子菜单 menuSimpleSub01
<a href="#" onMouseOver="expandMenu('menuSimpleSub01');">Menu Item 1</a><br>
<a href="#" onMouseOver="expandMenu('menuSimpleSub01');">Menu Item 2</a><br>
<a href="#" onMouseOver="expandMenu('menuSimpleSub01');">Menu Item 3</a><br>
</div>

3 menu.js/*-------------------------------------------\
|      Simple Cross Browser Menu Script      |
|--------------------------------------------|
|        Author:        Emil A. Eklund       |
|        First Created: May 19, 2000         |
|        Last Updated:  Aug 17, 2000         |
|--------------------------------------------|
|     Created to work with ie4+ and ns4+     |
\-------------------------------------------*/menuPrefix = 'menu';  // Prefix that all menu layers must start with
                      // All layers with this prefix will be treated
                      // as a part of the menu system.var menuTree, mouseMenu, hideTimer, doHide;function init() {
  ie4 = (document.all)?true:false;
  ns4 = (document.layers)?true:false;
  document.onmousemove = mouseMove;
  if (ns4) { document.captureEvents(Event.MOUSEMOVE); }
}function expandMenu(menuContainer,subContainer,menuLeft,menuTop) {
// Hide all submenus thats's not below the current level
doHide = false;
  if (menuContainer != menuTree) {
  if (ie4) {
      var menuLayers = document.all.tags("DIV");
      for (i=0; i<menuLayers.length; i++) {
        if ((menuLayers[i].id.indexOf(menuContainer) != -1) && (menuLayers[i].id != menuContainer)) {
          hideObject(menuLayers[i].id);
        }
      }
    }
    else if (ns4) {
      for (i=0; i<document.layers.length; i++) {
        var menuLayer = document.layers[i];
        if ((menuLayer.id.indexOf(menuContainer) != -1) && (menuLayer.id != menuContainer)) {
          menuLayer.visibility = "hide";
        }
      }
    }
  }
  // If this is item has a submenu, display it, or it it's a toplevel menu, open it
  if (subContainer) {
    if ((menuLeft) && (menuTop)) {
     positionObject(subContainer,menuLeft,menuTop);
     hideAll();
    }
    else {
      if (ie4) {
       positionObject(subContainer, document.all[menuContainer].offsetWidth + document.all[menuContainer].style.pixelLeft - 10, mouseY);
      }
      else {
       positionObject(subContainer, document.layers[menuContainer].document.width + document.layers[menuContainer].left + 50, mouseY);
      }
    }
    showObject(subContainer);
    menuTree = subContainer;
  }
}function showObject(obj) {
  if (ie4) { document.all[obj].style.visibility = "visible"; }
  else if (ns4) { document.layers[obj].visibility = "show";  }
}function hideObject(obj) {
  if (ie4) { document.all[obj].style.visibility = "hidden"; }
  else if (ns4) { document.layers[obj].visibility = "hide"; }
}function positionObject(obj,x,y) {
  if (ie4) {
    var foo = document.all[obj].style;
    foo.left = x;
    foo.top = y;
  }
  else if (ns4) {
    var foo = document.layers[obj];
    foo.left = x;
    foo.top = y;
   }
}function hideAll() {
if (ie4) {
    var menuLayers = document.all.tags("DIV");
    for (i=0; i<menuLayers.length; i++) {
      if (menuLayers[i].id.indexOf(menuPrefix) != -1) {
        hideObject(menuLayers[i].id);
      }
    }
  }
  else if (ns4) {
    for (i=0; i<document.layers.length; i++) {
      var menuLayer = document.layers[i];
      if (menuLayer.id.indexOf(menuPrefix) != -1) {
        hideObject(menuLayer.id);
      }
    }
  }
}function hideMe(hide) {
if (hide) {
if (doHide) { hideAll(); }
}
else {
doHide = true;
hideTimer = window.setTimeout("hideMe(true);", 2000);
}
}function mouseMove(e) {
  if (ie4) { mouseY = window.event.y; }
  if (ns4) { mouseY = e.pageY; }
}function itemHover(obj,src,text,style) {
  if (ns4) {
    var text = '<nobr><a href="' + src + '" class="' + style + '">' + text + '<\/a><\/nobr>'
    obj.document.open();
    obj.document.write(text);
    obj.document.close();
  }
}onload = init;
4 menu.css  .menu                   { position: absolute; left: 0; top: 0;
                             visibility: hidden; background: #FFFFFF;
                             width: 150px; margin: 0px; padding: 0px;
                             border: 1px solid silver;
                             overflow: visible; }
  .menu a, .menu a:visited { font-family: Tahoma; font-size: 11px;
                             text-decoration: none; font-weight: normal;
                             color: black; background: #E2E2E2;
                             width: 150px; padding-left: 10px; }
  .menu a:hover            { font-family: Tahoma; font-size: 11px;
                             text-decoration: none; font-weight: normal;
                             color: black; background: #F4F4FF;
                             width: 150px; padding-left: 10px; }
  .menu .border            { border: 1px solid #F4F4F4;
                             border-bottom: 1px solid #808080;
                             border-right: 1px solid #808080; }
  .menu .text              { overflow: hidden;
                             width: 125px; height: 15px; }
  .menu .arrow             { overflow: hidden;
                             width: 15px; height: 12px;
                             padding-left: 5px; padding-top: 3px; }
  .menu .arrow img         { width: 6px; height: 7px;
                             border: 0px; }
就一个文件，你自己拆分。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">

</style>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script type=text/javascript>
function getitem(item){
var s,s1;
s=item[1].replace(/"/g,"'").split(':',2);
if(item[2]!=1)s1='<a>';
else if(s[0]=='js')s1='<a href="javascript:'+s[1]+'">';
else s1='<a href="'+s[1]+'" target="'+s[0]+'">';
if(item[0]=='--')s1='<hr />';
else s1+=item[0]+'</a>';
return s1;
}
function createmenu(o,a) {
var i,j,str='';
for(i=0;i<a.length;++i){
str+='<li>'+getitem(a[i][0]);
if(a[i].length>1){
str+='<ul>';
for(j=1;j<a[i].length;++j){
str+='<li>'+getitem(a[i][j])+'</li>';
}
str+='</ul>';
}
str+='</li>';
}
o.innerHTML=str;
var sfEls = o.getElementsByTagName("li");
for(i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
$('cls').innerHTML+=(this.className);
}
}
}function init(){
createmenu($('nu'),
[ [ ['系统设置','js:alert("尚未完成")',1],
['用户管理','js:alert("")',1],
['权限管理','js:alert("")',1],
['--','js:alert("")',1],
['参数设置','js:alert("")',1]],
[ ['基础资料','js:alert("尚未完成")',1],
['部门设置','js:gp("main","op=manclass&cid=8")',1],
['职称设置','js:gp("main","op=manclass&cid=1")',1],
['学历设置','js:gp("main","op=manclass&cid=2")',1],
['政治面貌','js:gp("main","op=manclass&cid=3")',1],
['岗位名称','js:gp("main","op=manclass&cid=4")',1],
['员工状态','js:gp("main","op=manclass&cid=5")',1],
['民族设置','js:gp("main","op=manclass&cid=6")',1],
['户粮关系','js:gp("main","op=manclass&cid=7")',1]],
[ ['人事管理','js:alert("尚未完成")',1]],
[ ['查询报表','js:alert("尚未完成")',1]],
[ ['|','0','0',1]],
[ ['帮　　助','js:alert("尚未完成")',1],
['帮助主题','_BLANK:help.php',1],
['关于','js:alert("版权所有-XXX")',1]],
[ ['注　　销','_self:logout.php',1]]]);
}</script></head>
<body onload="init()">
<table width="100%">
  <tr>
    <td>Hello</td>
    <td>
kdsljflsa
sdfjlsad<br />
</td></tr><tr>
  <td>hahahahahaha</td>
  <td>
<ul id="nu" class="szhmenu"></ul>
</td></tr></table>
</body>
</html>

调试易

求一个菜单，有的是分呀，只要好使

解决方案 »