使用jQuery怎么实现一个下拉菜单效果-创新互联

这篇文章给大家介绍使用jQuery怎么实现一个下拉菜单效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

  
  
  
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-color: skyblue;
    }
    .wrap li {
      background-color: skyblue;
    }
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  
  
  



  

    

      一级菜单1
      
        
二级菜单11
        
二级菜单12
        
二级菜单13
      
    
    

      一级菜单2
      

        
二级菜单21
        
二级菜单22
        
二级菜单23
      
    
    

      一级菜单3
      

        
二级菜单31
        
二级菜单32
        
二级菜单33