js实现二级导航功能

效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' a { text-decoration : none；} * { margin : 0；padd : 0；盒子尺寸：边框盒子；字体系列： '微软雅黑；}李{列表式-类型：无；} .盒子{宽度： 220像素高度： 477像素；页边距-顶部： 110 px左边距： 100像素；} H3 {宽度： 100%；高度： 50px线高： 50px文本对齐：中心；背景# 09f } H3 a { color: # FFFFFF } H3 a :悬停{ color :深粉色；} ul Li {宽度： 100%；高度： 70px线高： 70pxborder: 1px纯红；背景技术# 09e} ul Li : not(:最后一个孩子){ border-bottom : none；} ul阿利{ display : blockcolor : # FFFFFF文本对齐：中心；字体粗细：粗体；font-size : 18px} ul Li :悬停{背景： # 00e 8d 7；} ul Li :悬停a { color:橙色} ul{position:相对；} .内容{位置：绝对值；top:0left: 220px宽度： 800像素；高： 300pxborder: 1px固体# 00FF66display:无；}/style/head body p style=' margin : 20px；end():结束当前链条中最近的筛选操作，并将匹配元素还原为之前的匹配状态/p div class=' box ' h3a href=' target=' rel='外部无跟随' _ blank '全部菜单/a/h3 ul阿利一级导航/a div class=' content ' 1111111111111111111111111111111111111111111111/div/Li阿利href=' '一级导航/a div class=' content ' 2222222222222222222222222222/div/Li阿利href=' '一级导航/a div class=' content ' 33333333333333333333333333333333333/div/Li阿利href=' '一级导航/a div class=' content ' 444444444444444444444/div/Li阿利href=' '一级导航/a div class=' content ' 55555555555555555555555555555555555555555555/div/Li阿利一级导航/a div class=' content ' 66666666666666666666666666666/div/Li/ul/div/body/html脚本src=' http :3358 lib。新浪app。com/js/jquery/1。7 .2/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(' ul Li ').悬停(function(){ $(this)).查找('。内容')。显示()。end().兄弟姐妹()。查找('。内容')。hide()；}，function(){ $(this).查找('。内容')。hide()；});})/脚本以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！