站长资源 网络编程

JavaScript CSS 菜单功能代码

整理:jimmy2026/8/6浏览2次

简介Menu #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item

<html> <head> <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>  </head> <body>  <ul id='menubar'> <li> File <ul> <li>New</li> <li>Open</li> <li>Save</li> <li>Save As</li> <li>Close</li> </ul> </li> <li> Edit <ul> <li>Cut</li> <li>Copy</li> <li>Paset</li> <li>Delete</li> <li>Select All</li> </ul> </li> <li> View <ul> <li> View List <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>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：JavaScript CSS菜单功能改进版

下一篇：JavaScript 字符串连接性能优化

站长资源 网络编程

JavaScript CSS 菜单功能代码

最新资源

一句话新闻

标签云