JavaScript CSS 菜单功能代码

Menu

#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;
}

function displaySubMenu(li){
var subMenu = li.getElementsByTagName('ul')[0];
subMenu.style.display = 'block';
}

function hideSubMenu(li){
var subMenu = li.getElementsByTagName('ul')[0];
subMenu.style.display = 'none';
}

• File
  • New
  • Open
  • Save
  • Save As
  • Close
• Edit
  • Cut
  • Copy
  • Paset
  • Delete
  • Select All
• View
  • View List
    • Tool Bar
    • State Bar
    • Function List
    • Label List
  • Show Line Number
  • Set Color

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]