前端之家收集整理的这篇文章主要介绍了
jQuery实现简单二级下拉菜单,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
菜单
$(document).ready(function(){
var objStr = ".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");
});
});
});
Box{margin:0 auto;text-align:left;width:920px;}
.clear{clear:both;}
/* 【经典】弹出层
菜单 */
.UpLayer{ margin:100px;}
.UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;}
.UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;}