本文實例講述了JavaScript實現非常簡單實用的下拉菜單效果。分享給大家供大家參考。具體如下：
這是一款實用的JS下拉菜單，鼠標移上菜單就顯示出二級菜單，是從其它網站上整理下來的，修改花了不少時間，現在去除了一些無用代碼，更簡潔了，而且代碼兼容性似乎也表現不錯，這款兩級下拉菜單，基本是由CSS和JavaScript共同實現的，真的挺簡潔實用。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-css-down-show-menu-codes/
具體代碼如下：
<!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 runat="server"> <title>JavaScript下拉菜單</title> <style type="text/css"> * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:14px; background-color:#000;} #navigation, #navigation li ul { list-style-type:none; } #navigation { } #navigation li { float:left; text-align:center; position:relative; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#fff; width:82px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#255f9e; padding-left:10px; } #navigation li a:hover { color:#fff; background:#ffb100; } #navigation li ul li a:hover { color:#fff; background:#ffb100} #navigation li ul { display:none; position:absolute; top:40px;margin-top:1px; font-size:12px;} </style> <script type="text/javascript"> 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"; } </script> </head> <body> <ul id="navigation"> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">菜單1</a> <ul> <li><a href="#">菜單1</a></li> <li><a href="#">菜單1</a></li> <li><a href="#">菜單1</a></li> <li><a href="#">菜單1</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">菜單2</a> <ul> <li><a href="#">欄目2</a></li> <li><a href="#">欄目2</a></li> <li><a href="#">欄目2</a></li> <li><a href="#">欄目2</a></li> <li><a href="#">欄目2</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">菜單3</a> <ul> <li><a href="#">菜單3</a></li> <li><a href="#">菜單3</a></li> <li><a href="#">菜單3</a></li> <li><a href="#">菜單3</a></li> <li><a href="#">菜單3</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">菜單4</a> <ul> <li><a href="#">菜單4</a></li> <li><a href="#">菜單4</a></li> <li><a href="#">菜單4</a></li> <li><a href="#">菜單4</a></li> <li><a href="#">菜單4</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目5</a> <ul> <li><a href="#">菜單5</a></li> <li><a href="#">菜單5</a></li> <li><a href="#">菜單5</a></li> <li><a href="#">菜單5</a></li> <li><a href="#">菜單5</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目6</a> <ul> <li><a href="#">菜單6</a></li> <li><a href="#">菜單6</a></li> <li><a href="#">菜單6</a></li> <li><a href="#">菜單6</a></li> <li><a href="#">菜單6</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目7</a> <ul> <li><a href="#">菜單7</a></li> <li><a href="#">菜單7</a></li> <li><a href="#">菜單7</a></li> <li><a href="#">菜單7</a></li> <li><a href="#">菜單7</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目8</a> <ul> <li><a href="#">菜單8</a></li> <li><a href="#">菜單8</a></li> <li><a href="#">菜單8</a></li> <li><a href="#">菜單8</a></li> <li><a href="#">菜單8</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目09</a> <ul> <li><a href="#">菜單9</a></li> <li><a href="#">菜單9</a></li> <li><a href="#">菜單9</a></li> <li><a href="#">菜單9</a></li> <li><a href="#">菜單9</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目10</a> <ul> <li><a href="#">菜單10</a></li> <li><a href="#">菜單10</a></li> <li><a href="#">菜單10</a></li> <li><a href="#">菜單10</a></li> <li><a href="#">菜單10</a></li> </ul> </li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">欄目11</a> <ul> <li><a href="#">菜單11</a></li> <li><a href="#">菜單11</a></li> <li><a href="#">菜單11</a></li> <li><a href="#">菜單11</a></li> <li><a href="#">菜單11</a></li> </ul> </li></li> </ul> </li> </ul> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
