CSS三级导航

CSS样式 实现三级导航

不只有 js 可以实现导航栏，CSS更加简单方便

css 代 码

<style>
        /* 一级菜单样式 */
        ul.main-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul.main-menu li {
            display: inline-block;
            position: relative;
        }

        ul.main-menu li a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: #333;
        }

        /* 二级菜单样式 */
        ul.submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #f9f9f9;
            padding: 0;
            z-index: 1; /* 保证二级菜单在上层 */
        }

        ul.submenu li {
            display: block;
        }

        ul.submenu li a {
            padding: 8px 15px;
            color: #666;
        }

        /* 三级菜单样式 */
        ul.submenu li.has-submenu {
            position: relative;
        }

        ul.submenu li.has-submenu:hover ul.submenu {
            display: block;
        }

        /* 给三级菜单加蓝色背景 */
        ul.submenu li.has-submenu:hover ul.submenu li.has-submenu:hover ul.submenu {
            display: block;
            background-color: #3f51b5;
            margin-top: -1px;
            left: 100%;
            top: 0;
        }

        ul.submenu li.has-submenu:hover ul.submenu li.has-submenu:hover ul.submenu li a {
            color: #fff;
        }

HTML 代 码

<nav>
        <ul class="main-menu">
            <li><a href="#">首页</a></li>
            <li class="has-submenu">
                <a href="#">产品</a>
                <ul class="submenu">
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li class="has-submenu">
                        <a href="#">更多产品</a>
                        <ul class="submenu">
                            <li><a href="#">产品3</a></li>
                            <li><a href="#">产品4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

css实现导航条