H5 头部

<section>
    <style>
        *{
            border:0;
            padding: 0;
            margin:0;
        }
        .HeadH5{
            min-height:80px;
            background: #fff;
            box-shadow: 0 .05rem .15rem rgba(0, 0, 0, 0.13);
            overflow: hidden;
        }

        .HeadH5 .tab{
            display: flex;
            justify-content: space-between;
            padding-top:15px;
            height:50px;
        }

        .HeadH5 .tab .logo{
            width:80px;
            height:100%;
            background:red;
            margin-left:10px;
        }
        .HeadH5 .tab .up{
            width:80px;
            height:100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .HeadH5 .tab .up .upicon{
            width:30px;
            height:16px;
            border-top:3px solid #888888;
            border-bottom:3px solid #888888;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .HeadH5 .tab .up .upicon .i{
            width:30px;
            height:3px;
            background:#888888;
        }
        .Maxmenu{
            display: none;
        }
        .HeadH5 .menu{
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            padding-top:15px;

        }
        .HeadH5 .menu .li{
            height:45px;
            color:#000;
            font-size:16px;
            font-weight: bolder;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            cursor: pointer;
        }

        .HeadH5 .menu .lis,.HeadH5 .menu .li:hover{
            height:45px;
            background: #d70c19;
            color:#fff;
        }
    </style>
    <div class="HeadH5">

            <div class="tab">
                <div class="logo">logo</div>
                <div class="up">
                    <div class="upicon"><div class="i"></div></div>
                </div>
            </div>

        <div class="Maxmenu">
            <div class="menu">
                <div class="li">2</div>
                <div class="li">3</div>
                <div class="li lis">4</div>
                <div class="li">5</div>
                <div class="li">6</div>
            </div>
        </div>

    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".upicon").click(function(){
                $(".HeadH5 > .Maxmenu").slideToggle("slow");
            });
        });
    </script>
</section>