下拉菜单在我的开发中经常遇到，但是每个项目都需要新建。 更改很容易，但是很麻烦。 我还很懒。 今天有时间整理我以前的项目开发菜单，制作通用版本。 以后没那么麻烦了。
特长
今天整理的菜单是由jquery css开发的，具有以下特征。
一、通用性强
以前使用的下拉菜单有问题，需要分别设定主导航和子菜单。 例如，辅助菜单必须按照class='first_menu '、辅助菜单必须按照class='second_menu的顺序类推。 这样的写法不利于程序员执行循环输出，但只需要引入一个菜单就可以了
二、美观自动调用下拉指示
以前，您手动将下拉式class添加到下拉菜单中，但只要在css中定义下拉效果的样式，代码就会自动搜索下拉菜单并添加指示箭头。
三.呼叫很简单
程序员输出列表很简单，只需递归调用菜单数据，不需要很多判断。
实现
一. HTML代码
首先在页面上输出菜单数据。 这些数据由ul和li组成，构成菜单列表。 结构代码如下。
首页(过山车火山喷火小鸟菜单2 )我山高地缘传书生(世世出世数据库)表数据加密数据建模c摄像头测试产品的基本html代码，无需简单说明代码的含义，请强调代码结构二级、三级、几级菜单都可以是主要嵌套的ul； 样式表名称也非常单一，子菜单具有sub_menu样式，对于循环调用程序代码非常有用。
二. CSS风格
Css样式代码也非常简单，具体代码如下：
a {文本修饰： none； }
ul，li { list-style:none； margin:0； padding:0； }
//定义菜单/
. Menue li { background:#111； color:#fff； height:30px； line-height:30px； position:relative； 浮点：左； margin-right:5px； width:100px； 文本对齐3360中心； font-family:Arial，Helvetica，sans-serif； }
. Menue li a { color:#fff； font-size:14px； 显示： block； }
//下拉菜单的样式/
ul.sub _ menu { position : absolute； width:100px； 显示：无； z-index:999； }
. menue liul.sub _ menu Li { background : none； color:#555； font-size:12px； 边框-底部：1 px # 333实体； position:relative； width:100px； height:30px； }
. menue liul.sub _ menu Li.last { border-bottom 3360 none； (/) js将此class添加到最后一个li中，以消除边框-底部效果) /
. menue liul.sub _ menu lia {后台： # 222； color:#888； 显示： block； height:30px； }
. menue liul.sub _ menu lia : hover， menue liul.sub _ menu lia.now { background : # f90； color:#fff； }
. Menue li.now， menueli.current { background : # f60； color:#fff； }
/*添加到下拉菜单中的class*/
. has menu { background 3360 URL (arrow.png ) no-repeat right； padding-right:15px； (/)主导航箭头向下(/
. menu elia.has menu { background : URL (arrow.png ) no-repeat right； padding-right:15px； 后台位置： right-30px； (/)下拉菜单上的箭头是右(/
. menue liul.sub _ menu lia.has menu { background 3360 # 222 URL (arrow.png ) no-repeat right top； }
. menue liul.sub _ menu lia.has menu : hover { background : # f 90 URL (arrow.png ) no-repeat right top； color:#fff； }
这里只强调两个注意事项：
1、在位置上配置
与 relative区别absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：
A、没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点。
B. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定。
(2). 父级有 position 属性，父级的“坐标原始点”为原始点。
relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用。
以上两种区别很重要，是十分常用的一个技巧，一定要区别开，本人在开发中就浪费了很多时间找问题其实就是因为这两个属性引起的。
2、background-position使用
有时候我们为了提升网站速度和网站管理方便，经常把一些美化常用的小图片放在一张大图片上，css需要相应的小图片时就可以通过这个方法来实现，只要弄明白什么意思调用起来十分方便。这个方法说明白点就是图片截取功能，用法具体说明如下：
语法：
background-position : length || length
background-position : position || position
取值：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position :top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。下面是一些等式
top left, left top 等价于 0% 0%.
top, top center, center top 等价于 50% 0%.
right top, top right 等价于 100% 0%.
left, left center, center left 等价于 0% 50%.
center, center center 等价于 50% 50%.
right, right center, center right 等价于 100% 50%.
bottom left, left bottom 等价于 0% 100%.
bottom, bottom center, center bottom 等价于 50% 100%.
bottom right, right bottom 等价于 100% 100%
三、JS代码
本菜单是以jquery为基础的所以首先必须引入jquery代码库，然后编写如下JS代码实现下拉菜单。
$(document).ready(function(){
//为导航设置默认高亮 与本菜单无关
$("ul.Menue li.Menue_li:eq(0)").addClass("current")
/*jquery menu 开始*/
//为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线
$(".sub_menu").find("li:last-child").addClass("last")
//遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态
$(".Menue li").each(function(){
if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}
})
//
$(".Menue li").hover(function(){
$(this).addClass("now");
var menu = $(this);
menu.find("ul.sub_menu:first").show();
},function(){
$(this).removeClass("now");
$(this).find("ul.sub_menu:first").hide();
});
var submenu = $(".sub_menu").find(".sub_menu")
submenu.css({left:"100px",top:"0px"})
$(".sub_menu li").hover(function(){
$(this).find("a:first").addClass("now")
$(this).find("ul:first").show();
},function(){
$(this).find("a:first").removeClass("now")
$(this).find("ul:first").hide()
});
/*jquery menu 结束*/
})
通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望火星上的冬日们批评指正或提出更优化的代码供本人参考，谢谢。
以上这篇通用无限极下拉菜单的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。