纯CSS下拉菜单

最新推荐文章于 2024-09-15 21:53:51 发布

hhxxcj

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量1.7k

点赞数

文章标签： css xhtml html javascript 浏览器 border

本文链接：https://blog.csdn.net/hhxxcj/article/details/3793582

版权

鼠标悬停下拉菜单在网页中很常见，一般的下拉菜单都是通过 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>
    <style type="text/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;
        }
    
</style>
</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>