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="width: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="width: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>