之前面试的时候被问到过一次，后来，在笔试的时候又遇到了，为了长点记性，就决定把这个好好写写。
第一种：
第一种是采用css来控制的；主要采用float，和position,display，hover来完成的。具体看以参看后面的源代码。
第二种：
主要采用hover,和display来实现的。
第三种：
采用的是js来控制的，mouseover，mouseout来控制显示的。当然也利用了css.
第四种：
这种也是纯css的形式，主要利用display:inline-block;和vertical-align:top;来实现的。如果不用vertical-align的话，就会导致一级菜单被二级菜单顶起来，使得上面无法对其，因此才需要设置。
每一种对应的源码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>横排二级下拉菜单</title> <style type="text/css"> *{ 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; } </style> </head> <body> <!--*****************111111111111111111111111111111111111***************/--> <div> <ul> <li><a href="#" >栏目一</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目二</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目三</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> </ul> </div> <!--*****************22222222222222222222222222222222222***************/--> <hr> <div> <ul> <li><a href="#" >栏目一</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目二</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目三</a> <ul> <li><a href="#" >二级栏目1</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目3</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> </ul> </div> <!--*****************333333333333333333333333333333333333***************/--> <hr> <div> <ul> <li><a href="#" >栏目一</a> <ul> <li><a href="#" >二级栏目1</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目3</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目二</a> <ul> <li><a href="#" >二级栏目1</a></li> <li><a href="#" >二级栏目2</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目三</a> <ul> <li><a href="#" >二级栏目1</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目3</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> </ul> </div> <!--*****************44444444444444444444444444444444***************/--> <hr> <div> <ul> <li><a href="#" >栏目一</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目二</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> <li><a href="#" >栏目三</a> <ul> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> <li><a href="#" >二级栏目</a></li> </ul> </li> </ul> </div> <script> var row=document.getElementsByClassName("row"); var length=row.length; for(var i=0;i<length;i++){ row[i].onmouseover=function(i){ var that=row[i]; return function(i){ child=that.childNodes; child[2].style.display="block"; } }(i); row[i].onmouseout=function(i){ var that=row[i]; return function(i){ child=that.childNodes; child[2].style.display="none"; } }(i); } console.log(row); </script> </body> </html>