经典的Jquery弹出层菜单,附完整代码。预览效果效果网址：http://www.keleyi.com/keleyi/phtml/divmenu.htm
jquery添加移除类的两个方法：
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
语法
$(selector).addClass(class)
参数 描述
class 必需。规定一个或多个 class 名称。
使用函数来添加类
使用函数向被选元素添加类。
语法
$(selector).addClass(function(index,oldclass))
removeClass() 方法从被选元素移除一个或多个类。
注释：如果没有规定参数，则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(class)
参数 描述
class
可选。规定要移除的 class 的名称。
如需移除若干类，请使用空格来分隔类名。
如果不设置该参数，则会移除所有类。
使用函数来移除类
使用函数来删除被选元素中的类。
$(selector).removeClass(function(index,oldclass))
下面是菜单的完整代码：
<!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=utf-8" />
<title>经典:柯乐义jQuery弹出层菜单</title><base target="_blank" />
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js"></script>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
.keleyi_com{ margin:100px;}
.keleyi_com dl dt{width:70px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.www_keleyi_com{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.keleyi_com dl dd{ width:110px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;}
.keleyi_com dl dd a{ display:block;border-bottom:#ccc 1px dashed;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var objStr = ".keleyi_com";
$(objStr).each(function (i) {
$(this).mouseover(function () {
$($(objStr + " dd")[i]).show();
$($(objStr + " dt")[i]).addClass("www_keleyi_com");
});
$(this).hover(function () { }, function () {
$($(objStr + " dd")[i]).hide();
$($(objStr + " dt")[i]).removeClass("www_keleyi_com");
});
});
});
</script>
</head>
<body>
<!-- 【经典】柯乐义弹出层菜单 -->
<div style="width:400px;margin-left:auto;margin-right:auto;">
<div class="keleyi_com">
<dl>
<dt><a href="http://www.keleyi.com">柯乐义菜单</a></dt>
<dd>
<a href="http://www.keleyi.com/menu/javascript/">Javascript</a>
<a href="http://www.keleyi.com/menu/jquery/">Jquery</a>
<a href="http://www.keleyi.com/menu/csharp/">C#</a>
<a href="http://www.keleyi.com/menu/net/">.NET</a>
</dd>
</dl>
</div><br /><br />请把光标移到上面菜单上<br /><br />
柯乐义提醒您:更多更新特效,请上www.keleyi.com
</div>
</body>
</html>
