本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码。分享给大家供大家参考。具体如下：

这里演示了仿谷歌风格的下拉菜单，其核心实际上是jquery.fixedMenu菜单，使用了jquery.fixedMenu.js和fixedMenu_style.css文件，已在代码中加注释，你可以从本代码中分享现这两个文件，然后重新引用。本菜单在鼠标点击主菜单的时候可向下显示二级子菜单，在火狐或铬浏览器下，还可显示菜单阴影效果。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-FixedMenu-menu-style-codes/

具体代码如下：

！DOCTYPE htmlheadtitlejQuery仿谷歌下拉导航菜单/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script style/*固定菜单_ style。半铸钢钢性铸铁(Cast Semi-Steel)代码*/body { padd : 0；保证金： 0；}.菜单{font: 13px/27px Arial，无衬线；color : # 3366 cchright : 30px背景： URL(图片/背面。gif)重复-x；}.菜单a:悬停{背景色： # E4 EB F8；}.菜单a { text-decoration : nonepadd : 4px 8px 7pxcolor : # 3366 ccoutline :无；}.菜单ul {列表式：无；保证金： 0；padding: 0 0 0 10px }。菜单ul Li { padd : 0；向左浮动：}.菜单ul Li ul Li { padd : 0；浮动：无；余量0 0 0 0px宽度： 100%;}.菜单ul li ul {位置：绝对值；border: 1px固体# c3d1 ecbox-shadow : 0 1px 5px # CCCCCC；页边距-顶部：-1px；显示器：无；padd : 0px 16px 0px 0；}.活动ul{display: block！重要；}.激活背景色为：白色；border: 1px固体# C3D1EC边框-底部： 0;盒子阴影： 0-1px 5px # CCCCCC；显示器：块；高度： 29pxpadding: 0 8px 0 8px相对位置：z-index : 1；}.主动a:悬停{背景-颜色：白色；}.活动ul a:悬停{背景色： # E4 EB F8；}.活动ul a{border: 0！重要；盒子阴影： 0 0 # CCCCCC；边框： 0；宽度： 100%;}.箭头{边框-颜色： #3366CC透明透明；边框样式：实线虚线；左边距左： 5px相对位置：top : 10px }/style script//jquery。FixedMenu。射流研究…文件代码开始(函数($){ $。fn。fixed menu=function(){返回这个。每个(function(){ var menu=$(this)；菜单。查找(' ul阿利')。bind('click '，function(){ if ($(this)).父项()。有类(' active '){ $(this).父项()。移除CLaSS(' active ')；} else{ $(this).父项()。父项()。查找('。活动')。移除CLaSS(' active ')；$(这个)。父项()。添加CLaSS(' active ')；} }) });} })(jQuery)；//jquery.fixedMenu.js文件代码结束$("文档")。ready(function(){ $(')).菜单')。固定菜单()；});/script/head dydiv class=' menu ' ul阿利“更多示例”插件和jQuery示例/a/li lia href='# '原型示例/a/Li lia href=' # ' Moodools示例/a/li lia href='#'Javascript示例/a/li /ul /li阿利a ul lia a href=' # ' gallers/a关于我们/a/li lia href='#'jquery特效/a/li /ul /li阿利/body/html希望本文所述对大家的jquery程序设计有所帮助。