探究纯粹的CSS下拉菜单

鼠标悬停下拉菜单在网页中很常见，一般的下拉菜单都是通过 JavaScript 对菜单的显示和隐藏进行控制，其实用纯粹的 CSS 也可以实现。用 CSS 的几点好处是，不需要考虑客户端浏览器是否禁用了 JS，而且用 CSS 实现下拉菜单效率比 JS 要高，还可以方便地制定样式和定位。我查阅了一些资料，用纯粹的 CSS 实现了下拉菜单，并且支持 IE6，分享给需要的朋友。

首先写出 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></li>
                <li><a href="#">栏目2-->菜单2</a></li>
                <li><a href="#">栏目2-->菜单3</a></li>
                <li><a href="#">栏目2-->菜单4</a></li>
                <li><a href="#">栏目2-->菜单5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">栏目3</a>
            <ul>
                <li><a href="#">栏目3-->菜单1</a></li>
                <li><a href="#">栏目3-->菜单2</a></li>
                <li><a href="#">栏目3-->菜单3</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

在没有 CSS 的情况下，它显示为一个最基本的无序列表的样式：

无序列表

下面编写 CSS，代码如下：

body {
    font-family:verdana, sans-serif; 
    font-size:small;
}
#navigation , #navigation li ul{
    padding:0; 
    margin:0;
    list-style-type: none;
}
#navigation li {
    float:left;
    text-align:center;
    position:relative;
}
#navigation li a:link, #navigation li a:visited {
    display:block; 
    text-decoration:none; 
    color:#000; 
    width:120px; 
    height:40px; 
    line-height:40px; 
    border:1px solid #fff; 
    border-width:1px 1px 0 0; 
    background:#c5dbf2; 
    padding-left:10px; 
}
#navigation li ul {
    display: none;
}
 
/* 以下只支持非IE6浏览器 */
#navigation li:hover a {
    color:#fff;
    background:#2687eb;
}
#navigation li:hover ul {
    display:block; 
    position:absolute; 
    top:40px;
    margin-top:1px;
    left:0; 
    width:120px;
}
#navigation li:hover ul li a {
    display:block; 
    background:#c5dbf2; 
    color:#000; 
    height:20px; 
    line-height:20px; 
    padding:5px 10px; 
    width:110px;
}
#navigation li:hover ul li a:hover {
    color:#fff;
    background:#6b839c; 
}

把 CSS 引入页面后，下拉菜单就做好了，效果是这样的（鼠标停在“栏目1”上的效果）：

css下拉菜单

你可能注意到了，我在 CSS 代码中使用了 li:hover 这个伪类选择器，这在 Firefox、Opera 等浏览器中都没有问题，但是有一个很严重的问题就是：在 IE6 中，hover 伪类仅可用于 a 标签，li:hover 在 IE6 中是无效的。所以，这个下拉并没有在 IE6 中实现，我们需要针对 IE6 作出一些改进。既然它只支持 a:hover，那我们就想办法把需要控制的下拉菜单写进 <a></a> 标签中。

改进后的 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>
    <!--[if IE 7]><!--><link rel="stylesheet" type="text/css" href="test.css" /><!--<![endif]-->
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="testforIE.css" /><![endif]-->
</head>
<body>
    <ul id="navigation">
        <li>
            <a href="#">栏目1
                <!--[if IE 7]><!-->
                </a>
                <!--<![endif]-->
            <table><tr><td>
            <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>
            </td></tr></table>
            <!--[if lte IE 6]>
            </a>
            <![endif]-->
        </li>
        <li>
            <a href="#">栏目2<!--[if IE 7]><!-->
                </a>
                <!--<![endif]-->
            <table><tr><td>
            <ul>
                <li><a href="#">栏目2-->菜单1</a></li>
                <li><a href="#">栏目2-->菜单2</a></li>
                <li><a href="#">栏目2-->菜单3</a></li>
                <li><a href="#">栏目2-->菜单4</a></li>
                <li><a href="#">栏目2-->菜单5</a></li>
            </ul>
            </td></tr></table>
            <!--[if lte IE 6]>
            </a>
            <![endif]-->
        </li>
        <li>
            <a href="#">栏目3<!--[if IE 7]><!-->
                </a>
                <!--<![endif]-->
            <table><tr><td>
            <ul>
                <li><a href="#">栏目3-->菜单1</a></li>
                <li><a href="#">栏目3-->菜单2</a></li>
                <li><a href="#">栏目3-->菜单3</a></li>
            </ul>
            </td></tr></table>
           ,  <!--[if lte IE 6]>
            </a>
            <![endif]-->
        </li>
    </ul>
</body>
</html>

针对 IE6 的 CSS 代码如下：

body {
    font-family:verdana, sans-serif; 
    font-size:small;
}
#navigation , #navigation li ul{
    padding:0; 
    margin:0;
    list-style-type: none;
}
#navigation li {
    float:left;
    text-align:center;
    position:relative;
}
#navigation li a:link, #navigation li a:visited {
    display:block; 
    text-decoration:none; 
    color:#000; 
    width:120px; 
    height:40px; 
    line-height:40px; 
    border:1px solid #fff; 
    border-width:1px 1px 0 0; 
    background:#c5dbf2; 
    padding-left:10px; 
}
#navigation li ul{
    display: none;
}
table {
    margin:-1px; 
    border-collapse:collapse;
}
/* 以下针对IE6 */
#navigation li a:hover {
    color:#fff; 
    background:#2687eb;
}
#navigation li a:hover ul { 
    display:block; 
    position:absolute; 
    top:40px;
    margin-top:1px;
    left:0; 
    width:120px;
}
#navigation li a:hover ul li a {
    display:block; 
    background:#c5dbf2; 
    color:#000; 
    height:20px; 
    line-height:20px; 
    padding:5px 10px; 
    width:110px;
}
#navigation li a:hover ul li a:hover {
    color:#fff;
    background:#6b839c; 
}

改进之后已经达到了我们预期的目的，在多种浏览器中都实现了鼠标悬停下拉菜单。

改进的地方主要有：针对 IE6 重新写了一个 CSS，命名为 testforIE.css；通过 IE 和非 IE 浏览器的条件注释 <!--[if lte IE 6]><![endif]–> 实现了针对不同的浏览器设定 <a></a> 标签不同的结束位置，从而可以在 IE6 中通过 a:hover 来控制下拉菜单；把下拉菜单的 <ul> 放在了一个只有一行一列的表格中，因为我目前发现只有这样才可以在 IE6 中正常显示，具体的原因还不是很清楚。

到此，用纯 CSS 实现的下拉菜单就制作完成了，这些都是我在网上查阅了一些资料后总结出来的，欢迎交流，希望高手指教。