本文中的示例介绍了jQuery实现的多级下拉菜单效果代码。 分享给大家参考。 具体如下。
这是一个jQuery多级下拉菜单。 在支持html5的浏览器中进行测试时，该菜单很智能，会自动确定浏览器边界并更改下拉菜单的显示方向。 在ie中没有发现这个效果。 从整体上看，与Windows系统“经典”主题时的菜单风格特别相似，配合图片，整体效果相当专业。
执行结果的屏幕截图如下。
在线演示地址如下。
具体代码如下。
jQuery多级下拉菜单$(document ).ready (函数) )。
$('#menu li ' ).hover(function () ) ) ) ) )。
$(this ).find )、ul:first )、CSS )、visibility:'visible '、display: 'none'}、fadein(400 )； //effect 1
、function ()、function ) )。
$(this ).find(ul:first ).CSS ) {visibility:'hidden；
)；
)；
body{background:#eee； font-family:Verdana，Helvetica，Arial，sans-serif； margin:0； padding:0}
. examples {后台： # fff； width:800px； 字体大小：80 %； border :1 px # 000固态硬盘； margin:3.5em auto 2em； padding:1em 2em 2em}
#menu {width:750px； height:531px； 后台： URL (images/snowboard.jpg； 文本对齐3360中心； margin :0自动； }
#menu ul {margin:0； padding:0； 列表样式： none； white-space:nowrap； 文本对齐：左对齐； 后台： # ccccd 0； border:1px solid #333； 边框颜色： # eee # 555 # 222 # fff； }
# menu ul { display :在线块； }
#menu li {margin:0； padding:0； 列表样式： none； }
# menu Li { display :在线块； 显示：在线； }
# menuulul { position : absolute； left:-9999px； }
# menu ul.level1{ margin :0 auto； }
# menu ul.level1Li.level1- Li { float : left； 显示： block； position:relative； }
#menu b {position:absolute； }
# menu a { display :块； font:normal 11px verdana，arial，sans-serif； color:#000； line-height:25px； 文本修饰：无； padding:0 20px； }
# menu ul.level1Li.level1- lia.level1- a { float : left； }
# menu ulli : hover ul { visibility : visible； left:0； top:21px； }
# menu ulli : hover ul { visibility : visible； left:100%； top :自动； margin-top:-25px； 玛格琳- left :-4px； }
# menu Li.left : hover ul { visibility : visible； left :自动； right:0； top:25px； }
# menu Li.left ulli 3360 hover ul { visibility : visible； left :自动； right:100%； top :自动； margin-top:-25px； 玛姬- right :-4px； }
#menu a:hover ul {left:0； top:23px； }
# menu Li.lefta : hover ul { left : auto； right:-1px； top:23px； }
# menu Li.left ula { text-align : right； }
#menu a:hover a:hover ul，
# menua : hovera : hovera : hover ul { left :100 %； 可视：可视； }
# menu Li.lefta : hovera : hover ul，
# menu Li.lefta : hovera : hovera : hover ul { left : auto； right:0； 可视：可视； }
#menu a:hover ul ul，
# menua : hovera : hoverulul { left :-9999p x； }
#menu li.left a:hover ul ul，
# menu Li.lefta : hovera : hoverulul { left :-9999p x； }
# menu lia.drop { background :传输权限中心(images/white-down.gif ) no-repeat right center； }
#menu li a .风中酒馆{ background : transparent URL (images/white-right.gif ) no-repeat right center； }
#menu li.left ul a .风中酒馆{ background : transparent URL (images/white-left.gif ) no-repeat left center； }
#menu li a:hover，
#menu li a .风中的酒窝：hover {color:#c60； 背景色： # c0c0c 8； }
#menu li:hover a，
#menu ul li:hover a .风中的酒窝{color:#c60； 背景色： # c0c0c 8； }
#菜单表{位置： absolute； 高清：0； width:0； left:0； border-collapse:collapse； margin-top:-6px； }
# menutabletable { position : absolute； left:99%； 高清：0； width:0； border-collapse:collapse； margin-top:-30px； 玛格琳- left :-4px； }
# menu Li.lefttable { position : absolute； 高清：0； width:0； left :自动； right:0； border-collapse:collapse； margin-top:-4px； }
# menu Li.lefttabletable { position : absolute； left :自动； right:100%； 高清：0； width:0； border-collapse:collapse； margin-top:-30px； 玛姬- right :-4px； }
homecontactusresortsurroundingareainformationprivacy