实现导航栏下拉菜单（带下拉三级菜单）

疆~

已于 2023-06-12 10:14:24 修改

阅读量3.5k

点赞数 1

分类专栏： Vue2 Javascript/CSS/HTML 文章标签： css html css3

于 2022-10-22 20:33:16 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/127466894

版权

效果图

html+css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            font-size: 14px;
            font-family: 'Microsoft Yahei', '微软雅黑', 'Simsun', '宋体', 'Arial', sans-serif;
        }

        .head-nav-con {
            width: 100%;
            height: 60px;
            background: #39b97d;
        }

        .head-nav-con ul {
            list-style: none;
            cursor: pointer;
        }

        .head-nav-con ul li {
            width: 170px;
            float: left;
        }

        .head-nav-con ul li:hover {
            background: #ff9c01;
        }

        .head-nav-con ul a {
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 60px;
            color: white;
        }

        .head-nav-con .drop-down {
            position: relative;
        }

        .head-nav-con .drop-down:hover .drop-down-content {
            display: block;
        }

        .head-nav-con .drop-down-content {
            display: none;
            position: absolute;
            z-index: 1;
            background: #007130;
        }

        .head-nav-con .drop-down-content li:hover {
            background-color: #17c8b9;
        }

        .head-nav-con .drop-down-2 {
            position: relative;
        }

        .head-nav-con .drop-down-2:hover .drop-down-content-2 {
            display: block;
        }

        .head-nav-con .drop-down-content-2 {
            display: none;
            position: absolute;
            left: 170px;
            top: 0;
            z-index: 1;
            background-color: #7b1fbe94;
        }

        .head-nav-con .drop-down-content-2 li {
            float: none;
            margin-bottom: 5px;
            background-color: #da283a;
        }

        .head-nav-con .drop-down-content-2 li:hover {
            background-color: #17c86a;
        }
    </style>
</head>

<body>
    <div class="head-nav-con">
        <ul>
            <li><a>首页</a></li>
            <li><a>一级菜单</a></li>
            <li class="drop-down">
                <a>二级菜单~</a>
                <ul class="drop-down-content">
                    <li><a>二级菜单</a></li>
                    <li><a>二级菜单</a></li>