jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下

1. HTML代码

  
    
    
    
    
    
  
  
    
    

      
菜单 1
        

          
菜单1.1
          
菜单1.2
          
菜单1.3
        
      
      
菜单 2
        

          
菜单2.1
          
菜单2.2
          
菜单2.3
          
菜单2.4
        
      
      
菜单 3
        

          
菜单3.1
          
菜单3.2
          
菜单3.3
        
      
      
菜单 4
        

          
菜单4.1
          
菜单4.3
        
      
      
菜单 5
        

          
菜单5.1
          
菜单5.2
        
      
    
     
    
    

      
菜单 1
        

          
菜单1.1
          
菜单1.2
          
菜单1.3
        
      
      
菜单 2
        

          
菜单2.1
          
菜单2.2
          
菜单2.3
          
菜单2.4
        
      
      
菜单 3
        

          
菜单3.1
          
菜单3.2
          
菜单3.3
        
      
      
菜单 4
        

          
菜单4.1
          
菜单4.3
        
      
      
菜单 5
        

          
菜单5.1
          
菜单5.2
        
      
    
  

2. CSS代码

*{
  margin: 0px;
  padding: 0px;
}
.content{
  margin: 40px 100px;
  float: left;
}
ul ,li{
  list-style: none;
   
}
.main,.hmain{
  width: 150px;
  background: #222;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  line-height: 40px;
  color: white;
}
.main>a,.hmain>a{
  text-decoration: none;
  color: white;
  display: inline-block;
  width: 150px;
  min-height: 40px;
}
.main:hover,.hmain:hover{
  background: black;
}
.child{
  background: #444;
  display:none;
}
.child li:hover{
  background: #333333;
}
 
/*垂直导航栏左浮动*/
.hmain{
  float: left;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。