1、说明
需要引用jquery.js文件，我的页面是在asp.net MVC4 添加的web窗体，其他不多说 直接看代码
2、代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestXLCD.aspx.cs" Inherits="MvcAppTest.TestXLCD" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="Easyui/jquery-1.7.2.min.js" type="text/javascript"></script> <style type="text/css"> li { list-style-type:none; height:32px; line-height:32px; vertical-align:middle; } </style> <script type="text/javascript"> $(function () { var oRegionAddXM = document.getElementById("divDK"); var oDivListAddXM = document.getElementById("divAddXM"); var colOptionsAddXM = document.getElementsByClassName("li2"); var bNoAdjustedXM = true; oRegionAddXM.onclick = function () { oDivListAddXM.style.display = "block"; //设置下列选择项的一些事件 for (var i = 0; i < colOptionsAddXM.length; i++) { colOptionsAddXM[i].style.cursor = "hand"; colOptionsAddXM[i].onmouseover = function () //为列表项添加鼠标移动事件 { this.style.backgroundColor = "#ffff00"; this.style.cursor = "pointer"; }; colOptionsAddXM[i].onmouseout = function () //为列表项添加鼠标移走事件 { this.style.backgroundColor = ""; }; } if (bNoAdjustedXM) { bNoAdjustedXM = false; //设置下拉列表的宽度和位置 var X = $('#divDK').offset().top; var Y = $('#divDK').offset().left; var wide = this.offsetWidth + 60; // oDivListAddXM.style.width = wide; $('#divAddXM').width(wide); $('#divAddXM').css({ 'left': Y, 'top': X + 32 }); } } oDivListAddXM.onmouseleave = function () { oDivListAddXM.style.display = "none"; }; }); function AddWG() { alert('菜单1'); } function AddWJ() { alert('菜单2'); } function AddPL() { alert('菜单3'); } function AddGS() { alert('菜单4'); } function AddGX() { alert('菜单5'); } </script> </head> <body> <form id="form1" runat="server"> <div id="divDK" style="100px;height:31px;margin-top:15px;padding-top:7px;"> <span style="cursor:pointer;">打开</span> </div> <div id="divAddXM" style="display:none;z-index:100;border:1px solid #0000aa;height:180px;overflow:hidden;position:absolute; background-color: #ccffff;"> <table style="100%;border:none;border-collapse:collapse;"> <tr> <td> <ul> <li class="li2" onclick="AddWG()">菜单1</li> <li class="li2" onclick="AddWJ()">菜单2</li> <li class="li2" onclick="AddPL()">菜单3</li> <li class="li2" onclick="AddGS()">菜单4</li> <li class="li2" onclick="AddGX()">菜单5</li> </ul> </td> </tr> </table> </div> </form> </body> </html>