CSS导航栏

1、CSS代码

        * {
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
        .box {
            /* 设置导航为块元素 */
            display: inline-block;
            /* 设置导航高度 */
            height: 40px;
            /* 设置导航背景色 */
            background-color: #708ae0;
        }

        /* 导航基本样式 */
        .box ul {
            /* 取消li的小圆点 */
            list-style-type: none;
        }

        .box a {
            /* 设置文字颜色 */
            color: #ffffff;
            /* 取消下划线 */
            text-decoration: none
        }

        .box ul>li {
            /* 设置左浮动 */
            float: left;
            /* 文字水平竖直居中 （值要和导航高度一致）*/
            line-height: 40px;
            /* 文字水平居中 */
            text-align: center;
            /* 设置每个导航的宽度 */
            width: 100px;
        }

        /* 鼠标悬停样式 */
        .box ul>li:hover .xiaLa {
            /* 鼠标悬停时显示下拉菜单 */
            display: block;
        }

        .box ul>li:hover {
            /* 鼠标悬停时导航颜色 */
            background-color: #4063d6;
        }

        /* 二级菜单样式 */
        .xiaLa {
            /* absolute 定位的元素和其他元素重叠，所以显示菜单后不会冲开其他元素 */
            position: absolute;
            /* 鼠标没有悬停时菜单不显示 */
            display: none;
            background-color: #708ae0;
            /* 设置宽度 */
            width: 100px;
            /* position:relative; */
        }

        .xiaLa li:hover .sanJi {
            /* 鼠标悬停时显示下拉菜单 */
            display: block;
        }

        /* 三级菜单样式 */
        .sanJi {
            position: absolute;
            display: none;
            /* 设置宽度 */
            width: 100px;
            background-color: #708ae0;
            /* 元素向右移动100px */
            left: 100px;
            /* 元素向上移送40px */
            transform: translateY(-40px);
        }

        /* 一级菜单分隔线样式 */
        .oneFenGe {
            width: 1px !important;
            height: 40px;
            background-image: linear-gradient(#ffffff00, #2b52d1, #ffffff00);
        }

        /* 二级和三级菜单分隔线样式 */
        .twoFenGe {
            width: 100px;
            height: 1px;
            background-image: linear-gradient(to right, #ffffff00, #2b52d1, #ffffff00);
        }

2、HTML代码

<div class="box">
        <ul>
            <li><a href="javascript:void(0)">菜单1</a></li>
            <li class="oneFenGe"></li>
            <li><a href="javascript:void(0)">菜单2</a>
                <ul class="xiaLa">
                    <li><a href="javascript:void(0)">子菜单1</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单2</a>
                        <ul class="sanJi">
                            <li><a href="javascript:void(0)">三级菜单1</a></li>
                            <li class="twoFenGe"></li>
                            <li><a href="javascript:void(0)">三级菜单2</a></li>
                            <li class="twoFenGe"></li>
                            <li><a href="javascript:void(0)">三级菜单3</a></li>
                            <li class="twoFenGe"></li>
                            <li><a href="javascript:void(0)">三级菜单4</a></li>
                        </ul>
                    </li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单3</a>
                        <ul class="sanJi">
                            <li><a href="javascript:void(0)">三级菜单1</a></li>
                            <li><a href="javascript:void(0)">三级菜单2</a></li>
                        </ul>
                    </li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单4</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单5</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单6</a></li>
                </ul>
            </li>
            <li class="oneFenGe"></li>
            <li><a href="javascript:void(0)">菜单3</a>
                <ul class="xiaLa">
                    <li><a href="javascript:void(0)">子菜单1</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单2</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单3</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单4</a></li>
                </ul>
            </li>
            <li class="oneFenGe"></li>
            <li><a href="javascript:void(0)">菜单4</a></li>
            <li class="oneFenGe"></li>
            <li><a href="javascript:void(0)">菜单5</a></li>
            <li class="oneFenGe"></li>
            <li><a href="javascript:void(0)">菜单6</a>
                <ul class="xiaLa">
                    <li><a href="javascript:void(0)">子菜单1</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单2</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单3</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单4</a></li>
                    <li class="twoFenGe"></li>
                    <li><a href="javascript:void(0)">子菜单5</a></li>
                </ul>
            </li>
            <li class="oneFenGe"></li>
            <li><a href="javascript:void(0)">菜单7</a></li>
        </ul>
    </div>

3、效果图