JavaScript CSS 菜单功能代码

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="author" content="ma jia nan"> <meta name="date" content="2008-12-7"> <meta name="description" content=""> <title>menu</title> <style type="text/css"> #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item style */ #menubar li a { border-style:none; color:black; display:block; width:150px; height:20px; line-height:20px; padding-left:10px; text-decoration:none; } /* the first level menu which displays default */ #menubar .menumain{ border-color:#c0c0c0; border-width:1px; border-style:solid; } /* the first leve style when mouse on it */ #menubar li a:hover{ background-color:#efefef; text-decoration:underline; } /* the second level menu block style */ #menubar li ul{ background-color:#efefef; border-style:none; display:none; position:absolute; top:20px; left:-40px; margin-top:2px; width:150px; } /* the sub menu item style when mouse on it */ #menubar li ul li a:hover { text-decoration:underline; padding-left:20px; } /* the third or more level menu block style */ #menubar li ul li ul { display:none; position:absolute; top:0px; left:150px; margin-top:0; margin-left:0; width:150px; } </style> <div> <ul id="menubar"> <li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)"> <a href="#" class="menumain">file</a> <ul> <li><a href="#">new</a></li> <li><a href="#">open</a></li> <li><a href="#">save</a></li> <li><a href="#">save as</a></li> <li><a href="#">close</a></li> </ul> </li> <li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)"> <a href="#" class="menumain">edit</a> <ul> <li><a href="#">cut</a></li> <li><a href="#">copy</a></li> <li><a href="#">paset</a></li> <li><a href="#">delete</a></li> <li><a href="#">select all</a></li> </ul> </li> <li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)"> <a href="#" class="menumain">view</a> <ul> <li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)"> <a href="#">view list</a> <ul> <li><a href="#">tool bar</a></li> <li><a href="#">state bar</a></li> <li><a href="#">function list</a></li> <li><a href="#">label list</a></li> </ul> </li> <li><a href="#">show line number</a></li> <li><a href="#">set color</a></li> </ul> </li> </ul> </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]