二级导航菜单

最新推荐文章于 2025-05-19 12:03:11 发布

Programmer_Dong

最新推荐文章于 2025-05-19 12:03:11 发布

阅读量1.2w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： html+css实现二级导航菜单

本文链接：https://blog.csdn.net/qq_41343536/article/details/81295343

Web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML5和CSS实现一个响应式的二级导航菜单，该菜单在鼠标悬停于一级菜单项时显示二级菜单，并且二级菜单项在鼠标悬停时会改变颜色。

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

本文用html5+css实现了二级导航菜单，二级导航菜单在网站建设中使用的越来越广泛。
效果图如下：
这里写图片描述
当鼠标悬停在一级菜单上时，出现二级下拉菜单

二级下拉菜单可以被选中，当鼠标悬停上去时，变色。

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="main">
          <ul id="list">
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单五</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </body>
</html>

css代码

          *{
                padding: 0px;
                margin: 0px;
            }
            #main{
                overflow: auto;
                text-align: center;
            }

            a{
                text-decoration: none;
                display: inline-block;
                height: 40px;
                width: 100px;
                color: white;
                background-color: darkgray;
                /*border: 1px solid red;
                box-sizing: border-box;*/
                line-height: 40px;
            }
            ul{
                list-style: none;
            }

            #list{
                display: inline-block;
                margin: 0px;
                padding: 0px;
                vertical-align: bottom;
            }

            #list>li{
                float: left;
            }

            #list>li>ul{
                display: none;
                position: absolute;
            }

            #list>li:hover ul{
                display: block;
            }

            a:hover {
                background-color: burlywood;
            }