下面小编就给大家带来一个通用无限下拉菜单的实现代码。我觉得边肖挺好的。我现在就分享给你，给你一个参考。来和边肖一起看看吧。
在我的开发中经常会遇到下拉菜单，但是每个项目都需要重写。虽然改起来简单但是麻烦，我还是懒。今天有时间整理一下我之前项目开发中的菜单，写一个通用版本，以后就不需要这么麻烦了。
特性
今天的菜单是由jquery css开发的，具有以下特点：
一、通用性强
之前用的下拉菜单有个问题，需要分别设置主导航和子菜单。例如，二级菜单是class='first_menu '，三级菜单是class='second_menu '.诸如此类。这种写法有一个问题就是不利于程序员循环输出。但是这个菜单只需要引入一个CSS样式，不需要定义多级菜单。
二、美观自动调用下拉指示
以前我们手动给下拉菜单添加一个下拉类，现在只需要在css中定义下拉效果的样式，代码就会自动找到下拉菜单并添加指示箭头；
三、调用简单
程序员的输出列表很简单，不需要太多判断，递归调用菜单数据即可。
实现
一、HTML代码
首先，我们在页面上输出菜单数据，它由ul和li组成，形成一个菜单列表。具体结构代码如下：
ul class='菜单'
Li class='Menue_li'a href='# '主页/a/li
=' Menue _ li 'a href=' # '菜单1 /a
ul class='sub_menu '
Lia=' # '过山车/a/li
Lia=' # '火山爆发/a/li
Lia=' # '小鸟/a/李
/ul
/李
Li class='Menue_li'a href='# '菜单2 /a
ul class='sub_menu '
Lia=' # '关于我们/a
ul class='sub_menu '
Lia=' # '山的高度和地理/a
ul class='sub_menu '
Lia=' # '飞鸽传书/a/李
Lia=' # '来生/a/li
Lia=' # '学徒/a/李
/ul
/李
Lia=' # '数据库/a
ul class='sub_menu '
Lia=' # '数据库表/a/li
Lia=' # '数据加密/a/li
Lia=' # '数据建模/a/li
/ul
/李
Lia=' #' cCamera /a/li
/ul
/李
Lia=' # '测试产品/a/li
/ul
/李
/ul
一些基本的html代码，非常简单，不需要解释代码的含义，强调代码结构：二级、三级、几级菜单是否以嵌套ul为主；样式表的名称也很单一，子菜单是“sub_menu”样式，非常有利于程序代码的循环调用。
二、CSS样式
Css样式代码也很简单。具体代码如下：
a { text-decoration:无；}
ul，李{列表式：无；边距：0；填充：0；}
/*定义菜单*/。menue Li { background:# 111；颜色：# fff高度：30px行高：30px位置：相对；浮动：左；右边距：5px宽度：100px文本对齐：居中；字体系列：Arial，Helvetica，无衬线；}。菜单阿利{ color:# fff；字体大小：14px显示：块；}
/*下拉菜单样式*/
ul . sub _ menu { position:absolute；宽度：100px显示：无；z指数：999；}。Menue li ul.sub_menu li {背景：无；颜色：# 555；字体大小：12px边框-底部：1px #333纯色；位置：相对；宽度：100px高度：30px}。menue Li ul . sub _ menu Li . last { border-bottom:none；} /*js会将这个类添加到最后一个li中，并移除边框底部效果*/。Menue li ul.sub_menu阿利{ background:# 222；颜色：# 888；显示：块；高度：30px}。菜单李ul.sub_menu阿利：悬停，menue Li ul . sub _ menu Li a . now { background:# f90；颜色：# fff}。李现在。menue Li . current { background:# f60；颜色：# fff}
/*如果有下拉菜单添加了类*/。hasmenu { background:URL(arrow . png)no-repeat right；填充-右：15px}/*主导航箭头向下*/。menue Li a . hasmenu { background:URL(arrow . png)no-repeat right；填充-右：15px背景-位置：右-30px；}/*下拉菜单向右箭头*/。menue Li ul . sub _ menu Li a . has menu { background:# 222 URL(arrow . png)no-repeat右上；}。menue Li ul . sub _ menu Li a . has menu:hover { background:# f90 URL(arrow . png)no-repeat右上；颜色：# fff}
这里我只强调两点注意事项：
1.位置上绝对和相对的区别
绝对：绝对定位，CSS写“位置：绝对；”，其定位分为两种情况，如下：
A.如果未设置上、右、下、左，则默认情况下，父级的“内容区域原点”为原点。
B.有设置上、右、下、左的情况。这里有如下两种情况：
(1).父节点没有位置属性，浏览器左上角(即主体)是定位的“坐标原点”。位置由顶部、右侧、底部和左侧属性决定。
(2).父体有位置属性，父体的“坐标原点”就是原点。
相对：相对定位，CSS写“位置：相对；”，引用父体的“内容区原点”为原点，如果没有父体，则Body的“内容区原点”为原点。位置由上下左右属性决定，具有“拉伸或占高”的功能。
以上两个区别很重要，是很常见的技能。必须区分它们。我浪费了很多时间在开发中找问题，其实就是这两个属性造成的。
2.背景位置的使用
有时候为了提高网站的运行速度，方便网站的管理，我们经常会把一些常用的小图放在一个大图上进行美化。当css需要对应的小图片时，可以用这种方法实现。只要知道是什么意思，打电话是很方便的。这种方法的白点是图像捕捉功能，使用细节如下：
语法：
背景-位置：长度||长度
背景-位置：位置||位置
取值：
Length: Percentage |由浮点数和单位标识符组成的长度值。
位置：顶部|中心|底部|左侧|中心|右侧
说明：
或者设置检索对象的背景图像位置。必须首先指定背景图像属性。属性定位不受对象的padding属性设置的影响。默认值为0% 0%。此时，背景图片将位于不包括填充的对象的内容区域的左上角。如果只指定了一个值，它将用于横坐标。纵坐标将默认为50%。如果指定了两个值，第二个值将用于纵坐标。如果该值设置为“右居中”，背景图像将位于右侧，因为右作为横坐标值将覆盖居中值。这里有一些方程式。
左上，左上相当于0% 0%。
顶部、顶部中心、中心顶部等于50% 0%。
右上，右上等于100% 0%。
左，左中，左中等于0% 50%。
中心，中心中心等于50% 50%。
右，右居中，右居中等于100% 50%。
左下，左下等于0% 100%。
底部、底部中心和底部中心等于50%和100%。
右下，右下等于100% 100%
三、JS代码
这个菜单是基于jquery的，所以要先介绍jquery代码库，然后写下面的JS代码实现下拉菜单。
脚本src='js/jquery.min.js'/script
脚本
$(文档)。ready(function(){
//设置导航的默认突出显示与此菜单无关
$('ul。李。Menue_li:eq(0)')。addClass('当前')
/*jquery菜单开始*/
//给子菜单中最后一个li添加样式，适合给li加下划线时去掉最后一个下划线。
$('.子菜单)。find('李：末子')。addClass('last ')
//遍历所有的li，判断是否有子菜单，如果有，添加一个箭头表示状态。
$('.李)。each(function(){
如果($(这个)。查找(' ul ')。长度！=0){$(这个)。find('a:first ')。addClass('hasmenu')}
})
//
$('.李)。hover(function(){
$(这个)。add class(“now”)；
var menu=$(这个)；
menu.find('ul.sub_menu:first ')。show()；
}，function(){
$(这个)。remove class(' now ')；
$(这个)。find('ul.sub_menu:first ')。hide()；
});
var子菜单=$('。子菜单)。查找('。子菜单’)
submenu.css({left:'100px '，top:'0px'})
$('.子菜单。hover(function(){
$(这个)。find('a:first ')。addClass('now ')
$(这个)。查找(' ul:first ')。show()；
}，function(){
$(这个)。find('a:first ')。remove class(“now”)
$(这个)。查找(' ul:first ')。隐藏()
});
/*jquery菜单的结尾*/
})
/脚本
通过以上步骤，实现了一个通用的多级菜单。以上代码是我在日常开发中积累的。由于本人水平有限，可能会有很多错误。希望同事们批评指正或者提出更优化的代码供我参考。谢谢你。
以上通用无限下拉菜单的实现代码就是边肖分享的全部内容。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。