纯css做三级导航

css做三级导航栏

首先创建一级导航栏li 在一级导航栏里添加二级导航ul li 再在二级导航里添加三级导航ul li

这就是三级导航的基本结构了

<body>
    <ul class="top">
        <li>
            <div>一级导航</div>
            <ul>
                <li>二级导航</li>
                <li>二级导航</li>
                <li>
                    <div>二级导航</div>
                    <ul>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <div>一级导航</div>
            <ul>
                <li>二级导航</li>
                <li>二级导航</li>
                <li>二级导航</li>
            </ul>
        </li>
        <li>一级导航</li>
    </ul>

接下来是css样式

* {
    padding: 0;
    margin: 0;
}

.top {
    width: 400px;
    background-color: antiquewhite;
    display: flex;
    list-style-type: none;
}

.top li {
    padding: 8px;
    position: relative;
}

.top ul {
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    position: absolute;
    top: 100%;
    list-style-type: none;
    width: 200px;
}

.top ul ul {
    left: 100%;
    position: absolute;
    top: 0;
}

.top li:hover {
    background-color: rgba(240, 220, 39, 0.886);
}

.top li:hover>ul {
    display: block;
}

再给大家看一下效果

纯css做三级导航

悦读