鼠标悬停下拉菜单在网页中很常见，一般的下拉菜单都是通过 JavaScript 对菜单的显示和隐藏进行控制，其实用纯粹的 CSS 也可以实现。用 CSS 的几点好处是，不需要考虑客户端浏览器是否禁用了 JS，而且用 CSS 实现下拉菜单效率比 JS 要高，还可以方便地制定样式和定位。我查阅了一些资料，用纯粹的 CSS 实现了下拉菜单，并且支持 IE6，分享给需要的朋友。
CSS 下拉菜单演示地址
首先写出 HTML 代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css下拉菜单</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<ul id="navigation">
<li>
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1-->菜单1</a></li>
<li><a href="#">栏目1-->菜单2</a></li>
<li><a href="#">栏目1-->菜单3</a></li>
<li><a href="#">栏目1-->菜单4</a></li>
</ul>
</li>
<li>
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2-->菜单1</a>&
