二级导航栏（列表）

最新推荐文章于 2025-05-18 14:23:35 发布

原创最新推荐文章于 2025-05-18 14:23:35 发布 · 1w 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#二级导航栏（列表）

导航栏同时被 3 个专栏收录

4 篇文章

订阅专栏

二级导航栏

2 篇文章

订阅专栏

HTML+CSS

1 篇文章

订阅专栏

这篇博客记录了日常中常见的二级导航栏实现方法，采用无序列表HTML标签进行构建，并在代码中添加了备注方便理解。作者以轻松愉快的语气分享了这一简单技巧，后续如有更新会适时更新。

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

日常用的，根据需求而级导航栏很多，（小傻猫）就日常记录了下
用无序列表标签实现的

在这里插入图片描述
2. 具体的代码中有备注，可以自己测试

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../CSS/text8.css" rel="stylesheet" type="text/css">
    <title>Title</title>
</head>
<body >
<nav class="nav_1">

    <ul>
        <li><a href="" >一级 </a>
            <ul>
                <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>
             </ul>
        </li>
        <li><a href="" >一级 </a>
             <ul>
                 <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>
             </ul>
        </li>
        
    </ul>
</nav>
</body>
</html>

CSS

*{
    padding: 0;
    margin:0;
}
body{
    background-color: #f5f2ff;
}
.nav_1{                        /*.容器整体 宽 高 的设定  */
    width: 100%;
    height: 50px;
    background-color: #eddaff;
    position: absolute;        /*固定一级菜单的位置*/
}
.nav_1 ul{                     /* 具体菜单的宽高的设定*/
    margin: 0 auto;
    width: 1190px;
    height: 100%;
}
.nav_1 ul li{                   /*去掉一级菜单的点，横向浮动*/
    list-style:none;
    float: left;
}
.nav_1 ul li a:link, .nav_1 ul li a:visited{         /*单个菜单的具体属性*/
    display: block;
    width: 238px;
    height: 100%;
    text-align:center;
    text-decoration: none;
    line-height: 50px;
    font-weight: bold;
    font-size: 22px;
    background-color: #fff7ff;
}

.nav_1 ul li a:hover,.nav_1 ul li a:active{           /*设定鼠标点击 移动过的属性*/
    background-color: #f8eaff;
}

.nav_1 ul li ul{                      /* 二级菜单整体设定   */
    display: none;                    /* 隐藏二级菜单列表*/
    position: absolute;               /*二级菜单的位置固定*/
}
.nav_1 ul li:hover ul{
    display: block;  /*二级菜单  将显示为块级元素*/
    width:auto;   /*消除二级菜单的滚动条，因为继承了父级的宽度*/
}
.nav_1  ul li ul li{
    float: none;                      /*消除二级菜单的浮动*/
    background-color: #eadfff;
    width:238px;
}

简单记录完毕，如有更新，静待时间（哈哈哈哈，小傻猫很快乐）