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代码实现下拉菜单。
<script src="https://www.jb51.net/js/jquery.min.js"></script> <script> $(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 结束*/ }) </script>
通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考，谢谢。
以上这篇通用无限极下拉菜单的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: