JavaScript CSS 菜单功能代码

</p> <p><title>Menu</title> </p> <p>#menubar {<br /> font-family:verdana;<br /> font-size:12px;<br /> margin:1px;<br /> }<br /> #menubar li {<br /> float:left;<br /> position:relative;<br /> text-align:left;<br /> }<br /> /* each menu item style */<br /> #menubar li a {<br /> border-style:none;<br /> color:black;<br /> display:block;<br /> width:150px;<br /> height:20px;<br /> line-height:20px;<br /> padding-left:10px;<br /> text-decoration:none;<br /> }<br /> /* the first level menu which displays default */<br /> #menubar .menuMain{<br /> border-color:#C0C0C0;<br /> border-width:1px;<br /> border-style:solid;<br /> }<br /> /* the first leve style when mouse on it */<br /> #menubar li a:hover{<br /> background-color:#efefef;<br /> text-decoration:underline;<br /> }<br /> /* the second level menu block style */<br /> #menubar li ul{<br /> background-color:#efefef;<br /> border-style:none;<br /> display:none;<br /> position:absolute;<br /> top:20px;<br /> left:-40px;<br /> margin-top:2px;<br /> width:150px;<br /> }<br /> /* the sub menu item style when mouse on it */<br /> #menubar li ul li a:hover {<br /> text-decoration:underline;<br /> padding-left:20px;<br /> }<br /> /* the third or more level menu block style */<br /> #menubar li ul li ul {<br /> display:none;<br /> position:absolute;<br /> top:0px;<br /> left:150px;<br /> margin-top:0;<br /> margin-left:0;<br /> width:150px;<br /> } </p> <ul id='menubar'> <li> File </p> <ul> <li>New</li> <li>Open</li> <li>Save</li> <li>Save As</li> <li>Close</li> </ul> </li> <li> Edit </p> <ul> <li>Cut</li> <li>Copy</li> <li>Paset</li> <li>Delete</li> <li>Select All</li> </ul> </li> <li> View </p> <ul> <li> View List </p> <ul> <li>Tool Bar</li> <li>State Bar</li> <li>Function List</li> <li>Label List</li> </ul> </li> <li>Show Line Number</li> <li>Set Color</li> </ul> </li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• Div+CSS+JS树型菜单，可刷新
• Div+Css(+Js)菜单代码及制作工具
• 无js5款纯div+css制作的弹出菜单标准
• JavaScript CSS创建右击菜单效果代码
• CSS JavaScript 实现菜单功能 改进版
• css+js下拉菜单
• 通用的二级菜单代码(css+javascript)
• JS+CSS 制作的超级简单的下拉菜单附图
• js+css实现tab菜单切换效果的方法
• js css实现垂直方向自适应的三角提示菜单