以前看着京东，淘宝的导航做的真好，真想哪一天自己也能做出来这么漂亮功能全的导航菜单。今天弄了一下午终于自制成功，主要使用jQuery和CSS，实现功能基本和京东一样。

功能介绍：1、鼠标停留导航；

2、根据子列表的高度，自动调整对齐方式（顶端对齐/父类目对齐);

3、父子类目样式一致。

功能截图：

源代码：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title meta name=' keywords ' content=' keywords '/meta name=' description ' content=' description '/head script type=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/脚本样式类型=' text/CSS ' body { font-size 336012 px } ul，Li { list-style-type : none；padding:0px } .菜单{ width :190 pxborder : solid 1px # e5d 1a 1背景-color:#FFFDD2} .optn {宽度：190px行高：28 px边框-顶部：破折号1px # CCCz指数：100;位置：relative} .内容{ padding-top :10 px；clear : left } a { text-decoration : none；color : # 666 padd :10 px } .optnFocus {底色： # ffffont-weight : bold } div { padd :10 px } div img { float : left；填充-右侧：6 px } span {填充-顶部：3 pxfont-size :14 px字体粗细：加粗；float:left} .尖端{宽度：190像素位置：绝对；padd :10 pxdisplay : none }。提示li{line-height:23px} .focus { border : solid 1px redbackground-color : # CCC }/style body script type=' text/JavaScript ' $(function(){ $(')' .optn ' .bind({鼠标悬停在：函数上(){ var LITop=12var liLeft=$(this).偏移量()。左$(这个)。宽度();if(($(this)).偏移量()。top()$(这个)。下一个(' ul ').height())){ liTop=$(this).偏移量()。顶部；} $(这个)。css(“”右边框',' 0 ');$(这个)。下一个('。提示')。显示()。CSS({ ' left ' : ileft ' px '，top : litop ' px ' })；$(这个)。addCLaSS(' focus ')；$(这个)。下一个('。提示')。addCLaSS(' focus ')；}，mouseout:function(){ $(this).下一个('。提示')。hide()；$(这个)。removeClass(“”焦点');}});});/scriptul li class='menu' div span电脑数码产品/span/div ul class=' content ' Li class=' optn ' a href=' # '笔记本/a/li ul class='tip' lia href='# '笔记本1/a/li lia href='# '笔记本1/a/li lia href='# '笔记本1/a/li lia href='# '笔记本1/a/li lia href='# '笔记本1/a/Li/ulli class=' optn ' a href=' # '移动硬盘/a/li ul class='tip' lia href='# '移动硬盘1/a/li lia href='# '移动硬盘1/a/li lia href='# '移动硬盘1/a/li lia href='# '移动硬盘1/a/li lia href='# '移动硬盘1/a/Li/ulli class=' optn ' a href=' # '电脑软件/a/li ul class='tip' lia href='# '电脑软件1/a/li lia href='# '电脑软件1/a/li lia href='# '电脑软件1/a/li lia href='# '电脑软件1/a/li lia href='# '电脑软件1/a/Li/ulli class=' optn ' a href=' # '数码产品/a/li ul class='tip' lia href='# '数码产品1/a/li lia href='# '数码产品1/a/li lia href='# '数码产品1/a/li lia href='# '数码产品1/a/li lia href='# '数码产品1/a/Li/ul/ul/Li/ulspan/span/body/html遇到的问题及解决办法：

1、鼠标指针位置获取：

答：函数{ alert(e . PageX)；警报(例如佩吉)；}//获取鼠标当前位置

b、获取元素的位置：$(这个)。偏移量()。top$(这个)。偏移量()。左/获取元素的位置

注：以上两种方法均在jQuery中适用，若使用射流研究…中，需做适当改动

2、两个区块叠加时，边框处理问题：

需要的效果是：

但是现实的效果却是：

这个问题困扰了我半天，也在一个群里求救，一个好心的兄弟给我一段射流研究…代码，结果我还是没用上，最后看了一个选项卡的实例，终于把这个问题搞定了。解决办法是：

人为加宽父菜单的宽度，然后把右边框设置成0,最后记得把父标签的放在最顶端显示

父菜单：右边框：0;z指数：100;位置：相对；宽度覆盖子菜单

子菜单：和父菜单背景色一样

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。