jquery 单击显示下拉菜单层 简单的示例 美化
<!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>
<title>jQuery+CSS打造的弹出层菜单</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{
padding:0;margin:0;
}
A:link {
COLOR: #ffffff; TEXT-DECORATION: none
}
A:visited {
COLOR: #6B0E06; TEXT-DECORATION: none
}
A:hover {
COLOR: #FF0000; TEXT-DECORATION: none
}
A:active {
COLOR: #bc2931
}
li{
list-style:none;
}
img{
border:none;
}
em{
font-style:normal;
}
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;
}
.menu{
float:left;width:40px;height:20px;line-height:20px;margin-left:10px;z-index:0;display:block;
}
.menu dl dt{ /* 主菜单 */
clear:both;width:auto;position:absolute; z-index:0;padding:0px;height:20px;line-height:20px;padding:0 5px 0 5px;
}
.menu dl dd{ /* 下拉菜单 */
clear:both;width:100px;position:absolute;z-index:0;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;
}
.menu dl dd a{
display:block;border-bottom:#ccc 1px dashed;
}
.menu02{
border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;padding:0 5px 0 5px;
}
.nav{float:left;padding:0 5px 0 5px;}
a:link.white12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #ffffff; font-family: "宋体";TEXT-DECORATION: none;test:expression(target="_blank");
}
a:visited.white12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
}
a:hover.white12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #FF0000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
}
a:active.white12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
}
a:link.black12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体";TEXT-DECORATION: none;test:expression(target="_blank");
}
a:visited.black12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
}
a:hover.black12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #FF0000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
}
a:active.black12 {
line-height: 20px;height:20px;letter-spacing: 1px;font-size: 12px; color: #000000; font-family: "宋体"; TEXT-DECORATION: none;test:expression(target="_blank");
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var objStr = ".menu";
$(objStr).each(function(i){
$(this).click(function(){
$($(objStr+" dd")[i]).show();
$($(objStr+" dt")[i]).addClass("menu02");
});
$(this).hover(function(){},function(){
$($(objStr+" dd")[i]).hide();
$($(objStr+" dt")[i]).removeClass("menu02");
});
});
});
</script>
</head>
<body>
<div style="clear:both;width:100%;height:20px;background-color:#B50F0F;line-height:20px;color:#FFFFFF;">
<span class="nav">首页</span> <span class="nav">资讯</span> <span class="nav">新闻</span> <span class="nav">图片</span> <span class="nav">论坛</span>
<span class="menu">
<dl>
<dt><a href="javascript:void(0)" class="white12" >菜单1></a></dt>
<dd>
<a href="http://www.feizhuwang.com" class="black12" >农产品供求信息1</a>
<a href="http://www.feizhuwang.com" class="black12" >热门文章1</a>
<a href="http://www.feizhuwang.com" class="black12" >联系站长</a>
<a href="http://www.feizhuwang.com" class="black12" >时光勿勿</a>
</dd>
</dl>
</span>
<span class="menu">
<dl>
<dt><a href="javascript:void(0)" class="white12" >单击弹出菜单层2></a></dt>
<dd>
<a href="http://www.feizhuwang.com" class="black12" >农产品供求信息2</a>
<a href="http://www.feizhuwang.com" class="black12" >热门文章2</a>
<a href="http://www.feizhuwang.com" class="black12" >联系站长2</a>
<a href="http://www.feizhuwang.com" class="black12" >时光勿勿2</a>
</dd>
</dl>
</span>
</div>
</body>
</html>