css实现多级导航

女爷i 2024-04-18 08:33 71阅读 0赞

看了bootstrap的以及导航条,发现只能点击到二级导航,最近需要三级甚至n级的,就自己研究了一下.

bootstrap的导航条[https://v3.bootcss.com/components/\#navbar][https_v3.bootcss.com_components_navbar].

我自己完成的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70][]

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <nav class="navbar-header">
                <ul class="nav">
                    <li class="dropdown">
                        <a href="#">project</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">aaa</a>
                            </li>
                            <li class="dropdown-submenu">
                                <a href="#">bbb</a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">ccc</a>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#">ddd</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">fff</a>
                                            </li>
                                            <li>
                                                <a href="#">ggg</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">eee</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#">project</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">aaa</a>
                            </li>
                            <li class="dropdown-submenu">
                                <a href="#">bbb</a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">ccc</a>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#">ddd</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">fff</a>
                                            </li>
                                            <li>
                                                <a href="#">ggg</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">eee</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </body>
    </html>

css:

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    
    .container {
        width: 100%;
        height: 100%;
    }
    
    .navbar-header {
        width: 100%;
    }
    
    nav {
        background-color: #eaeaea;
    }
    
    ul,
    li {
        margin: 0;
        list-style: none;
    }
    
    ul.nav {
        display: flex;
        align-items: flex-start;
        padding-left: 10px;
        background-color: lightblue;
    }
    
    ul.nav>li {
        float: left;
        display: block;
        position: relative;
        background-color: white;
        min-width: 160px;
    }
    
    ul.nav li:hover {
        background-color: #e6e6e6;
    }
    
    .nav>li>a {
        position: relative;
        padding: 10px 15px;
        display: block;
        color: lightskyblue;
    }
    
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        text-align: left;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 6px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }
    
    a {
        text-decoration: none;
        background-color: transparent;
        color: #337ab7;
    }
    
    .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }
    
    .dropdown-submenu {
        position: relative;
    }
    
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    
    .dropdown:hover>.dropdown-menu {
        display: block;
    }
    
    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }
    
    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    
    .dropdown-submenu:hover>a:after {
        border-left-color: #aaa;
    }

[https_v3.bootcss.com_components_navbar]: https://v3.bootcss.com/components/#navbar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f90458aac0404749b9ab4f6ae486f440.png