本文演示了jQuery三级下拉列表导航菜单,供大家参考:

jQuery三下拉列表导航菜单的基础上jquery-1.8.3.min.js,可以无限级分类,可以智能判断是否有子菜单,子菜单的菜单在鼠标上。

兼营:-------------------查看结果-------------------效果图


提示:如果不能在浏览器中正常运行,可以尝试切换浏览模式。

jQuery三级下拉列表导航菜单代码,供大家分享






jQuery三级下拉列表导航菜单




*边距:0;填充:0;}
字体大小:12px身体{;}
李{列表样式:无;}
ul.nav李{宽度:200px;文本对齐:中心;}
ul.nav >里{浮动:左;右边距:10px;}
Ul.nav Li h3 {身高:40px;线高度:40px;}
ul.nav >李> h3 {背景:# 72a7ff;}
ul.nav >李> 李h3 { background: # ffd9d9;}
ul.nav >李H3:悬停,选择{背景:# ffc0c0!重要的;}
李
> > li.on UL UL {显示:块;}
ul.nav李{位置:相对;}
ul.nav >李> 李UL {位置:绝对;顶:0;右:- 200px;}
ul.nav跨度。子{位置:绝对的;显示:块;右:10px;最高:0;宽度:10px;高度;宽度:;



$(文档)Ready(函数(){)
$(ul.nav李)。Hover(function(){)
$(这)。AddClass();

},
函数(){
$(这)。RemoveClass();

})
});

$(文档)Ready(函数(){)
$(ul.nav李)。Hover(function(){)
$(这)。母(UL)。兄弟姐妹(H3)。AddClass(选择);

},
函数(){
$(这)。母(UL)。兄弟姐妹(H3)。RemoveClass(选择);
})
});

$(文档)Ready(函数(){)
如果($(ul.nav李)。找到(UL)。Html()!){
$(ul.nav李),母(UL)。兄弟姐妹(H3)。追加();
}
});






我的网站

2级分类

3级分类

4级分类

5级分类
5级分类
5级分类
5级分类


4级分类
4级分类
4级分类


3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类




我的网站

2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类




我的网站

2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类




我的网站

2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类


2级分类

3级分类
3级分类
3级分类
3级分类











以上是分享jQuery三级下拉列表导航菜单的代码,希望大家能喜欢。