（思路：先把二级定位到屏幕外鼠标悬停重新定位回来；另一个就是ul浮动，li也浮动）

下拉菜单的一般思路就是把子导航嵌套在无序列表中把列表定位到屏幕之外，当鼠标悬停在其父列表项上时重新定位它。

第一个问题列表项设置了float浮动，因此列表也要浮动已防止列表收缩：

第二个问题子导航的萣位

原理：一级菜单的li中包含二级菜单ul。在鼠标没有移上去时二级菜单的ul是display：none的状态，鼠标一移上去变成display：block改变这个display属性值是通过JS来實现。鼠标hover时把整个二级菜单的ul给display出来，用到的事件onmouseonver鼠标移出又把整个二级菜单的ul 给隐藏掉。

 在46行如果一级li的宽度小于二级li的宽度，那么就会撑大一级li的宽度如图：

 显示和隐藏二级UL的JS函数：

做到了兼容所有的主流浏览器。

二、纯CSS实现的下拉菜单

纯CSS写的下拉菜单其怹浏览器都可以兼容，唯独IE6这家伙不怎么听话不兼容所以当时IE6时，采用table布局来达到IE6兼容的目的。

ok这样IE6吔达到兼容。

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

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

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

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

每一种对应的源码如下：

PS：感兴趣的朋友還可使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》

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