JS二级菜单不同实现方法分析

本文实例讲述了JS二级菜单不同实现方法。分享给大家供大家参考，具体如下：

之前面试的时候被问到过一次，后来，在笔试的时候又遇到了，为了长点记性，就决定把这个好好写写。

第一种：

第一种是采用css来控制的；主要采用float，和position,display，hover来完成的。具体看以参看后面的源代码。

第二种：

主要采用hover,和display来实现的。

第三种：

采用的是js来控制的，mouseover，mouseout来控制显示的。当然也利用了css.

第四种：

这种也是纯css的形式，主要利用display:inline-block;和vertical-align:top;来实现的。如果不用vertical-align的话，就会导致一级菜单被二级菜单顶起来，使得上面无法对其，因此才需要设置。

每一种对应的源码如下：

*{
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
 color: #333;
}
.nav{
 width: 400px;
 height: 150px;
 background: Gray;
 margin: 10px;
 overflow: hidden;
}
.nav  ul li{
  float :left;
  width: 100px;
  clear: right;
}
.nav ul li a:hover{
 color:red;
}
.nav ul li ul {
 display:none;
}
.nav ul li:hover ul{
 display:block;
 position: absolute;
}
.nav ul li:hover ul li{
 float:none;
}

.nav2{
 width: 400px;
 height: 200px;
 background: Gray;
 margin: 10px;
}
.nav2 ul li{
  width: 100px;
}
.nav2 ul li li{
 margin-left:20px;
}
.nav2 a:hover{
 color: red;
}
.nav2 ul li ul {
 display: none;
}
.nav2 ul li:hover ul {
 display: block;
}

.nav3{
 width: 400px;
 height: 150px;
 background: Gray;
 margin: 10px;
}
.nav3 ul li{
  width: 100px;
  float: left;
}
.nav3 ul li ul{
 display: none;
 position: absolute;
}
.nav3 ul li ul li{
 float: none;
}
.nav3 ul li a:hover{
 color:red;
}

.nav4{
 width: 400px;
 height: 200px;
}
.nav4 ul li{
 width:100px;
 display: inline-block;
 vertical-align: top;
}
.nav4 ul ul{
 display: none;
}
.nav4 ul li:hover ul{
 display: block;
}
.nav4 ul li a:hover{
 color:red;
}





 

  
栏目一
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
  
栏目二
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
  
栏目三
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
 




 

  
栏目一
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
  
栏目二
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
  
栏目三
   

    
二级栏目1
    
二级栏目
    
二级栏目3
    
二级栏目
    
二级栏目
   
  
 




 

  
栏目一
   

    
二级栏目1
    
二级栏目
    
二级栏目3
    
二级栏目
   
  
  
栏目二
   

    
二级栏目1
    
二级栏目2
    
二级栏目
    
二级栏目
   
  
  
栏目三
   

    
二级栏目1
    
二级栏目
    
二级栏目3
    
二级栏目
    
二级栏目
   
  
 




 

  
栏目一
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
  
栏目二
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
  
栏目三
   

    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
    
二级栏目
   
  
 

PS：感兴趣的朋友还可使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript操作DOM技巧总结》、《Javascript页面元素操作技巧总结》、《Javascript事件相关操作与技巧大全》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》

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