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

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

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

运行效果截图如下

在线演示地址如下

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

具体代码如下

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;idth:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
#menu {idth:750px; height:531px; background:url(images/snoboard.jpg); text-align:center; margin:0 auto;}
#menu ul {margin:0; padding:0; list-style:none; hite-space:norap; text-align:left; background:#d0; 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; :21px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; :auto; margin-:-25px; margin-left:-4px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; :25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; :auto; margin-:-25px; margin-right:-4px;}
#menu a:hover ul {left:0; :23px;}
#menu li.left a:hover ul {left:auto; right:-1px; :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/hite-don.gif) no-repeat right center;}
#menu li a.fly {background:transparent url(images/hite-right.gif) no-repeat right center;}
#menu li.left ul a.fly {background:transparent url(images/hite-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; idth:0; left:0; border-collapse:collapse; margin-:-6px;}
#menu table table {position:absolute; left:99%; height:0; idth:0; border-collapse:collapse; margin-:-30px; margin-left:-4px;}
#menu li.left table {position:absolute; height:0; idth:0; left:auto; right:0; border-collapse:collapse; margin-:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; idth:0; border-collapse:collapse; margin-:-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
  
Sno boarding
 


Expert
   
  
  
  
Night Life
  
Restaurants
  
   

Sno Hotel
The Snoman
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
Sno Report
   
  
  
  
Language
  
   

Austrian
German
French
English
   
  
  
  
Short Breaks
 
   
   
   
Privacy
  
 
 

电脑维修网希望本文所述对大家的jquery程序设计有所帮助。