使用CSS实现下拉菜单的效果-优快云博客

本文介绍如何仅使用CSS实现下拉菜单的功能，通过设置不同的CSS样式，使得鼠标悬停时菜单内容自动显示，无需额外的JavaScript代码，适用于网站开发初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

实现下拉菜单的效果，很多人喜欢先使用CSS将样式调试好后，再通过JavaScript自定义一个类似于nav_menu()的函数来处理鼠标操作来达到下拉菜单的效果。不过，本人认为网站开发过程中，完全没有必要添加太多的JavaScript代码（主要是从网站的流畅性和访问速度考虑的，JavaScript代码中一旦出现错误，网站就会卡在那里。对于非大师级的我们还是尽量避免那些以外吧）。

闲话少说，尽CSS实现下拉菜单的主要原理是：当鼠标不在菜单上时，下拉的内容存在，不过利用left: -9999px;属性值来实现，在这个位置我们是无法在页面中看到的。然而，当鼠标移到菜单上时，则实现left: auto;这样就自动显示在合适的位置。本人利用这种逻辑实现了一个下拉菜单导航，效果图（Metro风格）如下：

仅使用CSS实现下拉菜单的效果截图

这种技巧一般是无法使用语言来描述清楚的，详细的代码如下，希望读者能够自己敲写一遍后慢慢理解（仅限入门级啦）。

HTML文件：nav.html

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <!--下拉菜单的实现-->
    <title>仅使用CSS实现下拉菜单样例</title>

    <link rel="stylesheet" href="nav.css" />

</head>
<body>
    <div id="div_center">
        <ul id="nav">
            <li><a href="http://www.shopliyang.com.cn" title="首页">|&nbsp;首页</a>
            </li>
            <li><a href="#" title="asp.net">asp.net</a>
                <ul>
                    <li><a href="#">mvc</a></li>
                    <li><a href="#">web前端</a></li>
                </ul>
            </li>
            <li><a href="#" title="linux">linux</a>
                <ul>
                    <li><a href="#">服务器配置</a></li>
                    <li><a href="#">数据库管理</a></li>
                </ul>
            </li>
            <li><a href="#" title="数据结构与算法">数据结构与算法</a>
                <ul>
                    <li><a href="#">链表|栈|队列</a></li>
                    <li><a href="#">树|图|网</a></li>
                    <li><a href="#">经典算法</a></li>
                </ul>
            </li>
            <li><a href="#" title="数据挖掘技术">数据挖掘技术</a>
                <ul>
                    <li><a href="#">流数据</a></li>
                </ul>
            </li>
            <li><a href="#" title="关于">About Me</a>
                <ul>
                    <li><a href="#">技术支持</a></li>
                    <li><a href="#">关于博主</a></li>
                </ul>
            </li>
        </ul>

    </div>
</body>
</html>

CSS样式文件：nav.css

/*定义总体宽度|高度|背景颜色|居中对齐*/
#div_center
{
    width: 1280px;
    height: 30px;
    background: #44c7e5;
    margin: auto;
}
/*控制一级菜单行高|上边距|*/
#nav
{
    line-height: 30px;
    list-style-type: none;
    margin-top: 0px;
}
    /*一级菜单链接总体样式：每个菜单的宽|居中对齐|文字大小*/
    #nav a
    {
        display: block;
        text-align: center;
        font-family: 'Microsoft Sans Serif','Microsoft YaHei';
        font-size: 18px;
    }
        /* 未访问的链接 */
        #nav a:link
        {
            color: #200787;
            text-decoration: none;
            margin: 0px;
        }
        /* 已访问的颜色 */
        #nav a:visited
        {
            color: #FFF;
            text-decoration: none;
            margin: 0px;
        }
        /*鼠标在链接上*/
        #nav a:hover
        {
            color: #200787;
            text-decoration: none;
            margin: 0px;
        }
    /* 一级菜左对齐 */
    #nav li
    {
        float: left;
        margin-right: 8px;
    }
        /* 鼠标在一级菜单上改变其背景色 */
        #nav li a:hover
        {
            background: #4800ff;
            color: #ff0000;
        }
        /*二级菜单总体样式：背景颜色|外框宽度|
    相对位置|边框一个象素|上边没样式|
    左右下边实线|边框颜色|
    内边距1个象素*/
        #nav li ul
        {
            line-height: 24px; /*行高24px*/
            background: #FFF;
            list-style-type: none;
            text-align: left;
            left: -9999px; /*使ul标签下的内容无法可视*/
            width: 132px;
            position: absolute;
            border-width: 3px;
            border-top-style: none;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-color: #003399;
            padding: 1px;
            margin: 0px;
        }

            /*二级菜单链接样式；背景宽度|左对齐|左缩进*/
            #nav li ul a
            {
                display: block;
                width: 130px;
                text-align: left;
                padding-left: 2px;
            }
                /* 未访问的链接 */
                #nav li ul a:link
                {
                    color: #0d5097;
                    text-decoration: none;
                }
                /* 已访问的链接 */
                #nav li ul a:visited
                {
                    color: #0d5097;
                    text-decoration: none;
                }
                /* 鼠标在链接上 */
                #nav li ul a:hover
                {
                    color: #FFF;
                    text-decoration: none;
                    font-weight: normal;
                    background: #003399;
                }
        /*当鼠标在菜单栏上时，显示下拉菜单*/
        #nav li:hover ul
        {
            left: auto;
        }

点击此处，可以查看仅CSS实现下拉菜单的效果|欢迎转载本文，转载时请保留本文链接：http://www.shopliyang.com.cn/，如有疑问请到bbs.iliyang.cn论坛讨论，或直接soledad@iliyang.cn联系。

转载于:https://my.oschina.net/sunshinedabby/blog/73579