HTML CSS 实现二级导航菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44371671/article/details/107209458

该博客介绍了如何使用HTML和CSS创建二级导航菜单。首先，通过创建列表元素来搭建基本结构，然后在外层添加样式定义导航栏外观，接着设置二级菜单的样式，最后展示完成后的效果。

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

先创建一个


<header class="head">
   
</header>

再创建一个列表


<header class="head">
        <ul class="ul">
            <li>
            	<a href="#">我的淘宝</a>
            </li>
            <li>
            	<a href="#">购物车</a>
            	</li>
            <li>
                <a href="#">收藏夹</a>
            </li>
        </ul>
    </header>

再在第三个ｌｉ中创建一个列表


<header class="head">
        <ul class="ul">
            <li><a href="#">我的淘宝</a></li>
            <li><a href="#">购物车</a></li>
            <li>
                <a href="#">收藏夹</a>
                <ul class="list">
                    <li><a href="#">Lorem.</a></li>
                    <li><a href="#">Rerum?</a></li>
                    <li><a href="#">Corrupti.</a></li>
                </ul>
            </li>
        </ul>
    </header>

在ｈｅａｄｅｒ外创建一段话作为参照物


<header class="head">
        <ul class="ul">
            <li><a href="#">我的淘宝</a></li>
            <li><a href="#">购物车</a></li>
            <li>
                <a href="#">收藏夹</a>
                <ul class="list">
                    <li><a href="#">Lorem.</a></li>
                    <li><a href="#">Rerum?</a></li>
                    <li><a href="#">Corrupti.</a></li>
                </ul>
            </li>
        </ul>
    </header>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis et facere nobis error animi rem fugiat officia eius totam debitis explicabo voluptatem illum, repellendus deleniti atque quos quibusdam est quidem.</p>

再来设计最外面的导航栏样式


<style>
		/*清除浏览器的内外边距*/
        * {
            margin: 0px;
            padding: 0px;
        }
        
        /*设置最外层的宽高背景色*/
        .head {
            width: 100%;
            height: 50px;
            background-color: cyan;
        }
        
        /*去掉页面<a></a>的下划线*/
        a {
            text-decoration: none;
        }
        
        /*去掉列表前的原点*/
        ul {
            list-style: none;
        }
        
        /*设置在外层的导航栏宽高，位置居中，里面的字体居中*/
        .head>ul {
            width: 1000px;
            height: 50px;
            margin: auto;
            text-align: center;
        }
        
        /*设置单个导航栏的宽高，且浮动至一行，再设置上下左右外边距
        ，设置相对定位为下文的绝对定位做准备*/
        .head .ul>li {
            width: 200px;
            height: 50px;
            float: left;
            margin: 0px 100px 0px 0px;
            position: relative;
        }
        
        /*鼠标移动背景色换色*/
        .head .ul>li:hover {
            background: white;
        }
        
        /*设置字体与盒子的边距，且设定颜色*/
        .head .ul>li>a {
            line-height: 50px;
            color: chocolate;
        }
</style>

最后设置二级导航栏样式


<style>
		/*清除浏览器的内外边距*/
        * {
            margin: 0px;
            padding: 0px;
        }
        
        /*设置最外层的宽高背景色*/
        .head {
            width: 100%;
            height: 50px;
            background-color: cyan;
        }
        
        /*去掉页面<a></a>的下划线*/
        a {
            text-decoration: none;
        }
        
        /*去掉列表前的原点*/
        ul {
            list-style: none;
        }
        
        /*设置在外层的导航栏宽高，位置居中，里面的字体居中*/
        .head>ul {
            width: 1000px;
            height: 50px;
            margin: auto;
            text-align: center;
        }
        
        /*设置单个导航栏的宽高，且浮动至一行，再设置上下左右外边距
        ，设置相对定位为下文的绝对定位做准备*/
        .head .ul>li {
            width: 200px;
            height: 50px;
            float: left;
            margin: 0px 100px 0px 0px;
            position: relative;
        }
        
        /*鼠标移动背景色换色*/
        .head .ul>li:hover {
            background: white;
        }
        
        /*设置字体与盒子的边距，且设定颜色*/
        .head .ul>li>a {
            line-height: 50px;
            color: chocolate;
        }
		
		/*设置列表为不显示，设置绝对定位显现出来覆盖文字，设置背景色，设置宽度*/
        .head .ul>li>.list {
            display: none;
            position: absolute;
            background: white;
            width: 190px;
        }
        
        /*鼠标移动到该导航栏列表显现*/
        .head .ul>li:nth-of-type(3):hover .list {
            display: block;
        }
        
        /*设置宽度，下边距*/
        .head .ul>li .list li {
            margin-bottom: 15px;
            width: 100%;
        }
        
        /*设置背景色*/
        .head .ul>li .list li:hover {
            background: aqua;
        }
        
        /*设置鼠标移动至变色*/
        .head .ul>li .list li a {
            color: chocolate;
        }
</style>