JavaScript CSS 菜單功能代碼

來源:互聯網
上載者:User

<meta name="Author" content="Ma Jia Nan"><meta name="Date" content="2008-12-7"><meta name="Description" content=""><br /><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><p><ul id="menubar"><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">File </p><ul><li>New</li><li>Open</li><li>Save</li><li>Save As</li><li>Close</li></ul></li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">Edit </p><ul><li>Cut</li><li>Copy</li><li>Paset</li><li>Delete</li><li>Select All</li></ul></li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">View </p><ul><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.