下拉菜单的两种实现方式：CSS和JS

关注

原创最新推荐文章于 2026-03-31 12:01:01 发布 1.4w 阅读 AI 写同款· GEO 优化 ›

如何使用原生js来实现下拉菜单 下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！阅读详情

本文的下拉菜单核心是通过改变DISPLAY的值，来改变菜单的出现和隐藏.

在此简单介绍DISPLAY:

display：[参数] 属性定义：设置元素如何显示。

参数：默认为inline，具体参数如下表。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

上表参考：http://www.w3school.com.cn/cssref/pr_class_display.asp

较常用的参数有：inline、none、inline-block、block等，

其中：

inline：常用于无序列表ul，通常列表会默认列式排列（排成一列），使用inline后便可以行式排列（排成一行），也就是元素后面不带换行符；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。

block：高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度 PS：会使元素后面带一个换行符；
inline-block：综合上述两点，使用它的同级元素会排成一行，并且拥有它父元素的宽度；

一、通过CSS实现下拉菜单

源代码：index.css

*{
    margin:0;
    padding: 0;
}
#nav{
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background-color: #eee;
    color: #fff;
}
ul{
    list-style: none;
}
#nav ul li{
    width:100px;
    text-align: center;
    line-height: 50px;
    float: left;
}
#nav ul li ul li{
    float:none;
    background-color: #eee;
    display:none;
}
#nav ul li a{
    display:block;
}
#nav ul li a:hover{
    background-color:#ee0;
}
#nav ul li:hover ul li{
    display:block;
}

源代码：index.html

*{
    margin:0;
    padding: 0;
}
#nav{
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background-color: #eee;
    color: #fff;
}
ul{
    list-style: none;
}
#nav ul li{
    width:100px;
    text-align: center;
    line-height: 50px;
    float: left;
}
#nav ul li ul li{
    float:none;
    background-color: #eee;
    display:none;
}
#nav ul li a{
    display:block;
}
#nav ul li a:hover{
    background-color:#ee0;
}
#nav ul li:hover ul li{
    display:block;
}

通过改变当鼠标没有放在导航栏中时，二级列表display属性为none，否则为block;

二、JS实现下拉列表

index.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">简介</a>
                <ul>
                    <li><a href="">名称</a></li>
                    <li><a href="">获奖详情</a></li>
                </ul>
            </li>
            <li><a href="">历史</a></li>
            <li><a href="">机构</a></li>
            <li><a href="">新闻</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

源代码:script.js


window.onload=initAll;
function initAll(){
    var menu=document.getElementById('li');
    var subMenu=document.getElementById('subnav');
    var subMenuLi=document.getElementById('subnav').getElementsByTagName('li');
    menu.onmouseover=over;
    subMenu.onmouseover=over;
    menu.onmouseout=out;
    subMenu.onmouseout=out;
    function over(){
        for(var i=0;i<subMenuLi.length;i++){
            subMenuLi[i].style.display="block";
        }
    }
    function out(){
        for(var i=0;i<subMenuLi.length;i++){
            subMenuLi[i].style.display="none";
        }
    }

源代码：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="index.css">
    <script src="script.js"></script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="" id="li">简介</a>
                <ul id="subnav">
                    <li><a href="">名称</a></li>
                    <li><a href="">获奖详情</a></li>
                </ul>
            </li>
            <li><a href="">历史</a></li>
            <li><a href="">机构</a></li>
            <li><a href="">新闻</a></li>
            <li><a href="">关于我们</a></li>
        </ul>

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

这里的主要问题在于JS文件中的

    menu.onmouseover=over;		//鼠标在一级列表上面时，显示
    subMenu.onmouseover=over;		//鼠标在二级列表上面时，显示
    menu.onmouseout=out;		//鼠标在一级列表上面时，不显示
    subMenu.onmouseout=out;		//鼠标在二级列表上面时，不显示

如果没有第二行和第四行，就会出现不能点击二级列表的问题，也就是一旦鼠标离开一级列表，二级列表马上消失。