本文實例講述了JS實現樣式清新的橫排下拉菜單效果。分享給大家供大家參考。具體如下：
這是一款灰色調橫排清新的下拉菜單，完全符合WEB標準，兼容性不錯，菜單簡潔好用，適合大部分的網頁風格。如果色調不是你想要的，自己發揮聰明才智，修改一下吧。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-simple-style-hp-menu-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS下拉菜單，豎向</title><style type="text/css" media="screen"><!--#Nav {width: auto;float: left;border-left: 1px solid #777;}ul {margin: 0px;padding: 0px;list-style: none;}ul li {position: relative;width: 120px;float: left;}li ul {position: absolute;left: 0px;top: 23px;display: none;border-bottom: 1px solid #777;border-left: 0px;}ul li a {display: block;font-size: 12px;line-height: 22px;text-decoration: none;color: #333;background-color: #FFF;height: 22px;padding-left: 8px;border: 1px solid #777;border-left: 0px;}ul li ul li a {border: 1px solid #777;border-bottom: 0px;}a:hover {color: #F60;background-color: #EFEFEF;}* html ul li {float: left;height: 1%;}* html ul li a {height: 1%;}li:hover ul, li.over ul {display: block;}--></style><script language="javascript" type="text/javascript"><!--startList = function() {if (document.all && document.getElementById) {var menuRoot = document.getElementById("Menu");for (var i = 0; i < menuRoot.childNodes.length; i++) {var node = menuRoot.childNodes[i];if (node.nodeName == "LI") {node.onmouseover = function() {this.className += " over";}node.onmouseout = function() {this.className = this.className.replace(" over", "");}}}}}window.onload = startList;--></script></head><body><div id="Nav"><ul id="Menu"><li><a href="#">首頁</a></li><li><a href="#">關于我們</a><ul><li><a href="#">網站介紹</a></li><li><a href="#">客戶反饋</a></li><li><a href="#">產品服務</a></li></ul></li><li><a href="#">腳本下載</a><ul><li><a href="#">最新腳本</a></li><li><a href="#">下載排行</a></li><li><a href="#">分類索引</a></li></ul></li><li><a href="#">網頁特效</a><ul><li><a href="#">菜單</a></li><li><a href="#">布局</a></li></ul></li></ul></div></body></html>希望本文所述對大家的JavaScript程序設計有所幫助。
新聞熱點
疑難解答
