当前位置：&>&&>&&>&
jquery下拉菜单 ul标签下拉菜单的例子
发布时间：编辑：thatboy
本文分享下，jquery结合url标签实现下拉菜单的例子，有需要的朋友参考学习下。
jquery ul标签的代码，一个基于的下拉菜单效果的例子。
1，ul标签实现菜单：
复制代码 代码示例:
&div id=&menu&&
&li&&a href=&&&菜单一&/a&
&li&&a href=&&&子菜单1&/a&&/li&
&li&&a href=&&&子菜单2&/a&
&ul&&li&&a href=&&&子菜单7&/a&&/li&&/ul&
&li&&a href=&&&子菜单3&/a&&/li&
&li&&a href=&&&菜单二&/a&
&li&&a href=&&&子菜单4&/a&&/li&
&li&&a href=&&&子菜单5&/a&&/li&
&li&&a href=&&&子菜单6&/a&&/li&
2，CSS代码：
复制代码 代码示例:
ul,ol,li{list-style:padding:0margin:0}
#menu *{:30}
text-decoration:
text-align:
background:#333;
#menu .arrow{ /* 菜单项的右侧小箭头 */
padding-right:5
#menu&ul{height:30} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */
/* 一级菜单 */
#menu&ul&li{
text-align:
display:inline-
#menu&ul&li&a{color:#}
#menu&ul&li:hover{background:#666;}
/* 下拉的菜单栏 */
#menu&ul&li ul{
background:#c1cd94;
box-shadow:2px 2px 2px #000;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
/* 下拉菜单的菜单项 */
#menu&ul&li&ul li{padding-left:5 position:}
#menu&ul&li&ul li&a{color:#000;}
#menu&ul&li&ul li:hover{background:#d3dbb3;}
/* 三级及以下的菜单项的定位 */
#menu&ul&li&ul&li ul{left:150 top:0}
3，JS代码：
复制代码 代码示例:
$(document).ready(function()
/* 菜单初始化 */
$('#menu&ul&li&ul').find('li:has(ul:not(:empty))&a').append(&&span class='arrow'&&&/span&&); // 为有子菜单的菜单项添加'&'符号
$(&#menu&ul&li&).bind('mouseover',function() // 顶级菜单项的鼠标移入操作
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作
$(this).children('ul').slideUp('fast');
$('#menu&ul&li&ul li').bind('mouseover',function() // 子菜单的鼠标移入操作
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 子菜单的鼠标移出操作
$(this).children('ul').slideUp('fast');
本文标题：
本页链接：
12345678910全球最新的免费资源发布区
Son of Suckerfish二级、三级、多级下拉菜单制作方法
& 日 21:55 &
在original Suckerfish一级下拉菜单的中我们制作了一个一级下拉菜单，但是只要我们稍微扩充一下我们的话题，我们可以使用 CSS创建一个多级的下拉菜单。
与original Suckerfish JavaScript中代码不同的是，'sfHover' 函数适用于所有的Nav中的li元素的行为，而不是仅仅是直接的子菜单。所以多级的下拉菜单在Internet Explorer是很有可能实现的。
好吧，让我们开始吧。我们将要处理的列表代码将会如下面这样：
&ul id="nav"&
&li&&a href="#"&Percoidei&/a&
&li&&a href="#"&Remoras&/a&
&li&&a href="#"&Echeneis&/a&&/li&
&li&&a href="#"&Phtheirichthys&/a&&/li&
&li&&a href="#"&Remora&/a&&/li&
&li&&a href="#"&Remorina&/a&&/li&
&li&&a href="#"&Rhombochirus&/a&&/li&
&li&&a href="#"&Tilefishes&/a&&/li&
&li&&a href="#"&Bluefishes&/a&&/li&
&li&&a href="#"&Tigerfishes&/a&&/li&
&li&&a href="#"&Anabantoidei&/a&
&!-- etc. --&
&!-- etc. --&
这里有一些东西我们需要往一级下拉菜单模式中添加。首先，这个第三等级的列表（在演示中的'Echeneis, 'Phtheirichthys'等等）需要在反应列表的边上（如演示中的'Remoras'），所以我们需要添加适用于第一个下拉显示时所有的列表项目。
#nav li ul ul {
margin: -1em 0 0 10
因为我们无法准确地知道绝对位置Box的上边距，所以它们将会被设置在显示出来的列表下面。这就是为什么这个下一级的top margin 需要设置为-1em。但是这样的话同样无法将这个菜单拉伸足够远到反应列表边上。因为默认的高度比 1em 更大(一般是 1.2em), 所以我们需要添加在ul的CSS规则中添加一些东西。
#nav, #nav ul {
padding: 0;
margin: 0;
list-style:
line-height: 1;
由于继承了第二等级列表显示出来的特性，这个第三等级列表也会被显示出来。我们同样需要调整这个第三等级的高度（记住我们需要重复写出:hover pseudo class 带.sfhover class属性。）
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999
现在我们需要调整一下规则， 以便当反应列表项目显示出来通过显示下拉菜单（在一级下拉菜单中是这样的：#nav li:hover ul, #nav li.sfhover ul { left: }）：
#nav li: hover ul,
#nav li li: hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
这里就是二级下拉菜单演示： .
好了，按照上面提到的方法，你可以制作出你想要的不同等级的下拉菜单，二级下拉菜单、三级下拉菜单、多级下拉菜单等等。这里是三级下拉菜单演示： :
#nav li: hover ul ul,
#nav li: hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
left: -999
#nav li: hover ul,
#nav li li: hover ul,
#nav li li li: hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul {
添加下面的代码就可以拥有四级下拉菜单了:
#nav li: hover ul ul,
#nav li: hover ul ul ul,
#nav li: hover ul ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul,
#nav li.sfhover ul ul ul ul {
left: -999
#nav li: hover ul,
#nav li li: hover ul,
#nav li li li: hover ul,
#nav li li li li: hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul,
#nav li li li li.sfhover ul {
演示：这里是多级下拉菜单演示：
文章出自：
版权所有。本站文章除注明出处外，皆为作者原创文章，可自由引用，但请注明来源。 禁止全文转载
真的，我猜你也会喜欢的：
您或许对下面这些文章有兴趣:&&&&&&&&&&&&&&&&&&&&本月吐槽辛苦排行榜
免费资源部落博客、论坛、问答和优惠网的创建者
经常混迹于各种免费资源中，尝鲜后乐于分享给他人。用WP搭建了部落博客，没事儿就折腾Wordpress，喜欢找免费空间，但只求精，稳定，耐用。有时也会介绍一点关于建站的知识和主机、服务器的使用心得与体会。PS：此人为男。
TA的专栏：&&|&&
关于本文的作者
所属分类：
链接地址：
浏览前页：
浏览后页：
部落快速搜索栏
热门点击排行榜
网站导航栏
免费资源重点推荐
最新文章推荐
部落最新评论列表
不得不看的秘密
部落本月最受关注的热点
(热度184℃) (热度148℃) (热度132℃) (热度112℃) (热度97℃) (热度89℃) (热度85℃) (热度81℃) (热度71℃) (热度67℃) (热度63℃) (热度61℃) (热度56℃) (热度50℃) (热度49℃) (热度44℃) (热度40℃)
部落本月踩得最多的宝贝
(踩15,400次) (踩9,050次) (踩8,570次) (踩7,300次) (踩5,720次) (踩5,060次) (踩4,530次) (踩4,300次) (踩3,290次) (踩3,180次)
免费资源部落，是一个致力发布和推广来自世界各地的免费资源，包括多样实用的免费空间、各种优秀的免费软件、各样可用的免费网盘等个人博客网站。站长qi是一位很普通不过的人，长期关注网络空间、互联网、软件应用、程序开发与设计、网络应用等。免费资源部落成立的目的就是希望与更多人分享网络快乐与精彩！本站持续修改完善中，如遇不便还请谅解^_^ASP下拉导航菜单用AJAX下拉的位置怎么能让二级菜单的位置在每一个对应一级菜单项的下面， 并且用mouseout方法，放到二级菜单时还没放好，二级菜单就消失了
[问题点数：70分]
ASP下拉导航菜单用AJAX下拉的位置怎么能让二级菜单的位置在每一个对应一级菜单项的下面， 并且用mouseout方法，放到二级菜单时还没放好，二级菜单就消失了
[问题点数：70分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2014年11月论坛优秀版主
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。