jQuery实现带延时功能的水平多级菜单效果

本文实例讲述了jQuery实现带延时功能的水平多级菜单效果。分享给大家供大家参考，具体如下：

运行效果图如下：

具体代码如下：

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
background: #fff;
color: #333;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}
div#banner {
background: transparent url(images/mega.gif) top left no-repeat;
padding-top: 12px;
padding-bottom: 36px;
}
div#banner h1, div#menu h2 {
margin: 0;
padding: 0;
}
div#banner h1 a {
display: block;
width: 270px;
height: 120px;
}
div#banner h1 a span, div#banner .skip {
position: absolute;
top: -10000px;
left: -10000px;
}
ul#menu {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2, ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}
ul#menu li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.mega a {
background: transparent url(images/arrow1.gif) center right no-repeat;
padding: 0 1.2em;
}
ul#menu li.mega a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}
ul#menu li.hovering div {
display: block;
}
ul#menu li.mega div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}
ul#menu li div a.more {
color: #390;
font-weight: bold;
}
ul#menu div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}







 
  
   Mega Shop
  Skip navigation
  

   

    
     主页
    
    
     Latest news, special deals, and more...
    
   
   

    
     关于他
    
    
     
      Menswear
     
     

      Shirts, T-shirts, Accessories, More...
     
     
      Gifts
     
     

      Sporting goods, Gadgets, More...
     
     
      Clearance!
     
     

      40% off all photo accessories this weekend only. Don't miss out!
     
More stuff for him...
    
   
   

    
     我是谁
    
    
     
      Ladieswear
     
     

      Tops, Pants, Skirts, T-shirts, More...
     
     
      Gifts
     
     

      Sporting goods, Gadgets, More...
     
     
      Shop Now for Mother's Day!
     
     

      Earlybird Mother's Day specials. Shop early, save on shipping!
     
More stuff for her...
    
   
   

    Stuff for kids
    
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
   
   

    Stuff for pets
    
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
   
  
 
 

  
 

完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。