經典的Jquery彈出層菜單,附完整代碼。預覽效果效果網址：http:///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:///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://">菜單</a></dt>
<dd>
<a href="http:///menu/javascript/">Javascript</a>
<a href="http:///menu/jquery/">Jquery</a>
<a href="http:///menu/csharp/">C#</a>
<a href="http:///menu/net/">.NET</a>
</dd>
</dl>
</div><br /><br />請把光標移到上面菜單上<br /><br />
提醒您:更多更新特效,請上www.
</div>
</body>
</html>