jQuery实现的多级下拉菜单效果代码

这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下

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

这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体上来看，和Windows系统的“经典”主题时的菜单风格特别相似，配合图片，整体效果还是相当有专业水准的。

运行效果截图如下：

在线演示地址如下：

http://demo.html.cn/js/2015/jquery-nlevel-nav-menu-style-codes/

具体代码如下：

  jQuery多级下拉菜单  body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} .examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em} #menu {width:750px; height:531px; background:url(images/snowboard.jpg-600); text-align:center; margin:0 auto;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;} #menu ul {display:inline-block;} #menu li {margin:0; padding:0; list-style:none;} #menu li {display:inline-block; display:inline;} #menu ul ul {position:absolute; left:-9999px;} #menu ul.level1 {margin:0 auto;} #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} #menu b {position:absolute;} #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu ul li:hover > ul {visibility:visible; left:0; top:21px;} #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;} #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;} #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;} #menu a:hover ul {left:0; top:23px;} #menu li.left a:hover ul {left:auto; right:-1px; top:23px;} #menu li.left ul a {text-align:right;} #menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;} #menu li.left a:hover a:hover ul, #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} #menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;} #menu li.left a:hover ul ul, #menu li.left a:hover a:hover ul ul {left:-9999px;} #menu li a.drop {background:transparent url(images/white-down.gif) no-repeat right center;} #menu li a.fly {background:transparent url(images/white-right.gif) no-repeat right center;} #menu li.left ul a.fly {background:transparent url(images/white-left.gif) no-repeat left center;} #menu li a:hover, #menu li a.fly:hover {color:#c60; background-color:#c0c0c8;} #menu li:hover > a, #menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;} #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;} #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;} #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;} #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}    Home
Contact Us<!-- Email
Telephone
Online Form
Snail Mail Address
Resort<!-- Ski Hire Facilities
Main Ski Slopes<!-- Beginners Slopes
Intermediate Slopes
Advanced Skill Levels<!-- Local
Nearby
With instructor
Snow boarding
Expert
Night Life
Restaurants<!-- Snow Hotel
The Snowman
Ice Cavern
Ski Inn
Car Hire<!-- From Airport
In Resort
Multiple Resorts
Surrounding Area<!-- Where to go
What to do
Places of interest
National parks & Museums
Information<!-- Money Exchange
Resort Essential Information<!-- Lift Passes
Insurance
Gear Rental<!-- Boots
Skis
Ski Wear
Goggles
Ski Schools
Snow Report
Language<!-- Austrian
German
French
English
Short Breaks
Privacy