HTML实现三级导航菜单栏_html三级导航怎么做-优快云博客

本文链接：https://blog.youkuaiyun.com/Mortal__/article/details/109705834

本文展示了如何利用HTML和CSS技术构建一个具备三级导航功能的菜单栏。在实现过程中，需要引入CSS来重置浏览器默认样式，确保在不同环境下的一致显示效果。

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

实现效果：

注意：

实现完成代码功能需要引入reset.css以重置浏览器内置格式。

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/HTML+CSS exercise/reset.css">
    <title>三级菜单导航条</title>
    <style>
        .nav1{
    
            /*ul*/
            width: 1200px;
            margin: 0 auto;
            list-style: none;
        }
 
        .border1:last-child{
    
            border-right:none;
        }
        .nav1 li{
    
            float: left;
            line-height: 48px;
        }
        a{
    
            display: block;
            height: 48px;
            background-color: #ccc;
            text-decoration: none;
            color: #777777;
            padding: 0 68px 0 68px;
        }
        .nav1 a:hover{
    
            background-color:#696969 ;
            color: #e8e7e3;
        }
        .nav2{
    
            position: absolute;
            width: 200px;
            display: none;
        }
        .nav1 li:hover .nav2 ,.nav2 li:hover .nav3,.nav2 li:hover .last{
    
			display: block;
        }
        .nav3{
    
            position: absolute;
            width: 200px;
            left: 200px;
            /*菜单上移一格*/
            margin-top: -48px;
            display: none;
        }
        .last{
    
            position: absolute;
            width: 200px;
            right: 200px;
            margin-top: -48px;
            display: none;
        }
        
    </style>
</head>
<body>
    <ul class="nav1">
        <li class="border1">
            <a href="#">一级菜单</a>
            <ul class="nav2">
                <li>
                    <a href="#">二级菜单</a>
                    <ul class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <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 class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <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 class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <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 class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <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 class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#"