（思路：先把二级定位到屏幕外，鼠标悬停重新定位回来；另一个就是ul浮动，li也浮动）
下拉菜单的一般思路就是把子导航嵌套在无序列表中，把列表定位到屏幕之外，当鼠标悬停在其父列表项上时，重新定位它。
有两个问题需要注意，
第一个问题，列表项设置了float浮动，因此列表也要浮动已防止列表收缩：
ul.nav,ul.nav ul{float:left}
ul.nav li{float:left}
第二个问题，子导航的定位
ul.nav li ul{position:absolute;left:-999em}
ul.nav li:hover ul{left:auto}
一、CSS+JS下拉菜单
原理：一级菜单的li中包含二级菜单ul。在鼠标没有移上去时，二级菜单的ul是display：none的状态，鼠标一移上去变成display：block。改变这个display属性值是通过JS来实现。鼠标hover时，把整个二级菜单的ul给display出来，用到的事件onmouseonver。鼠标移出又把整个二级菜单的ul 给隐藏掉。
nav-js.html文件
<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <link href="nav-js.css" rel="stylesheet"> <script type="text/javascript"> //显示子菜单 function showSubMenu(li){ var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } //隐藏子菜单 function hideSubMenu(li){ var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <ul id="navigation"> <li><a href="#">首页</a></li> <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><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> <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><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> <li><a href="#">我们的方向</a></li> <li><a href="#">关于我们</a></li> </ul> </body> </html>