本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：
这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
在网页设计中，导航菜单是不可或缺的部分，尤其在复杂的网站结构中，二级下拉导航菜单能够帮助用户更方便地浏览和访问相关内容。本实例通过结合JavaScript（JS）和层叠样式表（CSS）技术，展示了如何创建一个简单的二级下拉导航菜单。下面将详细解析这个实例中的关键知识点。
HTML 结构是构建菜单的基础。在给出的代码中，`<div id="mainNavBar">` 是整个导航条的容器，`<div id="nav">` 包含了导航菜单的列表 `<ul>`。每个一级菜单项由 `<li>` 标签表示，内部包含一个链接 `<a>` 和一个用于展示二级菜单的 `<div id="subNav">`。二级菜单由多个链接组成，也放在 `<ul>` 中，但它们默认是隐藏的。
CSS 部分主要负责布局和样式。`body,html` 设置基本页面样式，`#mainNavBar` 定义导航条的背景和内边距，`#nav` 设置了导航菜单的宽度、高度和居中对齐。`#nav ul` 和 `#nav ul li` 分别处理无序列表和列表项的样式，包括浮动、宽度、高度、行高以及去除默认的列表样式。`#nav ul li a` 设置链接的基本样式，如颜色和悬停效果。二级菜单的样式 `#subNav` 定义了位置（绝对定位）、宽高、背景色、文字颜色和对齐方式。
JavaScript 部分则负责交互逻辑。通过获取所有一级菜单项 `nav`，并遍历它们，为每个菜单项添加鼠标悬停事件监听器。当鼠标悬停时，改变字体粗细、背景色和溢出属性，使二级菜单可见；当鼠标离开时，恢复原始样式并隐藏二级菜单。
这个实例中的二级下拉导航菜单具有以下特点：
1. 使用绝对定位让二级菜单在一级菜单下方显示。
2. 鼠标悬停时改变一级菜单样式，并显示二级菜单。
3. 鼠标离开一级菜单后，二级菜单会自动隐藏。
这样的实现方法简洁且易于理解，对于初学者来说是学习 JavaScript 与 CSS 配合制作交互效果的好例子。通过调整 CSS 样式和 JavaScript 逻辑，可以轻松适应不同的设计需求，如增加多级菜单、动画效果等。对于网页开发者来说，掌握此类技巧能提升用户体验，使网站更具吸引力。
