本文实例讲述了jQuery实现的多级下拉菜单效果代码。分享给大家供大家参考。具体如下：
这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体上来看，和Windows系统的“经典”主题时的菜单风格特别相似，配合图片，整体效果还是相当有专业水准的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/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); 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
- 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