CSS + HTML实现导航栏悬停二级菜单效果(仿一加设计)

CSS样式

div,ul,li,p{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        li{
            list-style: none;
        }
        .nav{
            width: 100%;
            height: 60px;
            font-size: 14px;
            font-weight: bolder;
            font-family: 微软雅黑;
            background-color: white;
            color: black;
            position: relative;
             display: block;
             z-index: 99;
        }

        .nav_box{
            width: 550px;
            height: 100%;
            margin: 0 auto;
        }
        .nav_box ul{
            display: flex;
            justify-content: space-between;
        }
        .nav_box ul li{
            float: left;
            line-height: 50px;
            cursor:pointer;
        }
        .nav_box_t{
            width: 100%;
            height:200px ;
            background-color: pink;
            position: absolute;
            top: 60px;
            left: 0;
            display: none;
            z-index: 99;
        }
        .nav_item>li>a{
            padding: 23px 0;
        }
        .nav_item>li>a:hover{
            border-bottom: 3px solid red;

        }
        .nav_item>li:hover>.nav_box_t{
            display: block;
        }

HTML代码

<div class="nav">

            <div class="nav_box">
                <ul class="nav_item">
                    <li><a href="#">8系列</a>
                        <div class="nav_box_t">

                        </div>
                    </li>
                    <li><a href="#">7T系列</a>
                        <div class="nav_box_t">

                        </div>
                    </li>
                    <li><a href="#">商城</a>
                        <div class="nav_box_t">

                        </div>
                    </li>
                    <li><a href="#">品牌</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">零售店</a></li>
                </ul>

            </div>

        </div>

实现效果

以上代码思路仅供参考。