jQuery实现简单二级下拉菜单
html代码
<divclass="UpLayer"> <dl> <dt> <ahref="javascript：void(0)">毛票票</a></dt> <dd> <ahref="http://www.demo.com/js/">特效</a><ahref="http://www.demo.com/Tutorials/">教程</a><ahref="http://www.demo.com/zy/">资源</a><ahref="http://www.demo.com/mb/">模板</a><ahref="http://www.demo.com/news/">资讯</a></dd> </dl> </div>
js代码
<scripttype="text/javascript">
//【经典】弹出层菜单
$(document).ready(function(){
varobjStr=".UpLayer";
$(objStr).each(function(i){
$(this).click(function(){
$($(objStr+"dd")[i]).show();
$($(objStr+"dt")[i]).addClass("UpLayer02");
});
$(this).hover(function(){},function(){
$($(objStr+"dd")[i]).hide();
$($(objStr+"dt")[i]).removeClass("UpLayer02");
});
});
});
</script>
css代码
body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
u{text-decoration:none;}
em{font-style:normal;}
a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
body{font-size:12px;font-family:Arial,Verdana,Helvetica,sans-serif;word-break:break-all;}
.box{margin:0auto;text-align:left;width:920px;}
.clear{clear:both;}
/*【经典】弹出层菜单*/
.UpLayer{margin:100px;}
.UpLayerdldt{width:50px;position:absolute;z-index:3;padding:05px;line-height:20px;}
.UpLayer02{border:#ccc1pxsolid;border-bottom:none;background:#f1f1f1;margin:-1px00-1px;}
.UpLayerdldd{width:80px;position:absolute;z-index:2;border:#ccc1pxsolid;padding:5px;line-height:20px;background:#f1f1f1;display:none;margin:19px00-1px;}
.UpLayerdldda{display:block;border-bottom:#ccc1pxdashed;}
最好不要忘记插入jQueryjs文件,最好下载最新的。
以上所述就是本文的全部内容了，希望大家能够喜欢。