jQuery实现的精美平滑二级下拉菜单效果代码

本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果。分享给大家供大家参考，具体如下：

这是一款jQurey实现的向下二级导航菜单效果。效果非常不错，由上到下平滑延伸，给人的感觉协调唯美！js与html代码结构简单明了，便于使用与修改！

运行效果截图如下：

具体代码如下：

* { margin:0; padding:0; }
body { font:12px/normal Arial, Helvetica, sans-serif; }
ul, ol { list-style:none; }
a img { border:none; }
#content { width:800px; margin:30px auto; }
.main_nav { width:100%; height:30px; }
.main_nav ul li { float:left; width:190px; height:30px; border-right:1px solid #666; position:relative; }
.main_nav ul li a { display:block; height:30px; line-height:30px; text-align:center; background:#333; color:#ccc; text-decoration:none; }
.main_nav ul li dl { position:absolute; left:0; top:30px; width:190px; display:none; }
.main_nav ul li dl dd { height:31px; }
.main_nav ul li dl dd a { display:block; height:30px; line-height:30px; text-align:center; color:white; background:#555; border-bottom:1px solid #666; }
.main_nav ul li dl dd a:hover { background:#333; color:#ccc; }
.click { margin-top:200px; }




 
  

   
网页特效
    

     
网页特效
     
网页特效
     
网页特效
     
网页特效 
     
网页特效
    
   
   
网页设计
    

     
网页设计
     
网页设计
     
网页设计
     
网页设计 
     
网页设计
     
网页设计 
     
网页设计 
    
   
   
网页制作
    

     
网页制作
     
网页制作
     
网页制作
     
网页制作 
     
网页制作
    
   
   
网站优化
    

     
网站优化
     
网站优化
     
网站优化
     
网站优化 
     
网站优化
    
   
  
 

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

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