JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#" class="more">more</a>
           <div class="right_gnbWrap">
                <a href="#" class="close">close</a>
                <ul class="right_gnb">
                    <li>
                        <a href="#">menu1</a>
                        <ul>
                            <li><a href="#">sub1</a></li>
                            <li><a href="#">sub2</a></li>
                            <li><a href="#">sub3</a></li>
                            <li><a href="#">sub4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu2</a>
                        <ul>
                            <li><a href="#">sub1</a></li>
                            <li><a href="#">sub2</a></li>
                            <li><a href="#">sub3</a></li>
                            <li><a href="#">sub4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu3</a>
                        <ul>
                            <li><a href="#">sub1</a></li>
                            <li><a href="#">sub2</a></li>
                            <li><a href="#">sub3</a></li>
                            <li><a href="#">sub4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu4</a>
                        <ul>
                            <li><a href="#">sub1</a></li>
                            <li><a href="#">sub2</a></li>
                            <li><a href="#">sub3</a></li>
                            <li><a href="#">sub4</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        <div class="gnb">
            <div class="gnbWrap"><img src="http://placehold.it/250x42" alt=""></div>
        </div>
        <div...

CSS

* {margin:0px; padding:0px;}
            ul,ol,li { list-style:none;}
            a {text-decoration:none;}
            img { vertical-align:top; border:none;}
            
            .gnb:after{content: ""; display: block; clear: both;}
            .gnb{
                background-color: #dddddd;
                height: 60px;
            }
            .gnbWrap{
                padding-top: 10px; padding-bottom: 8px;
                width: 890px; margin: 0 auto;
            }
            .gnbWrap>img{
                width: 250px; height: 42px;
            }
            .lnb{
                background-color: #555555;
                width: 100%;
                height: 50px; position: absolute;
            }
            .lnb>ul{
                width: 500px; margin: 0 auto;
            }
            .lnb>ul:after{content: ""; display: block; clear: both;}
            .lnb>ul>li{
                width: 20%;
                float:left;
            }
            .lnb>ul>li>a{
                background-color: #00ffff;display: block; text-align: center;
                width: 100%; height: 50px; line-height: 50px; color: black;
            }
            .sub{display: none;}
            .sub>li{
                width: 100px; height: 50px;
            }
            .sub>li>a{
                background-color: #7fffd4;display: block; text-align: center;
                width: 100%; height: 50px; line-height: 50px; color: black;
            }
            .more{
                width: 50px; height: 50px; background-color: yellow;
                position: absolute; right: 10px; top: 0; display: none;
                color: #000; line-height: 50px; text-align: center;
            }
            a.close{
                background-color: #ffe4c4; width: 50px; height: 50px;
                position: absolute; right: 0; top: 0; color: #000;
                line-height: 50px; text-align: center;
            }
            .right_gnbWrap{
                height: 100%;
         ...

JavaScript

$(document).ready(function(){
                $('.lnb>ul>li').hover(function(){
                    $(this).find('.sub').stop().slideToggle();
                });
                $('.more').click(function(event){
                    event.preventDefault();
                    $('.right_gnbWrap').addClass('on');
                });
                $('.close').click(function(event){
                    event.preventDefault();
                    $('.right_gnbWrap').removeClass('on');
                    setTimeout(function(){
                        $('.right_gnb>li>a').removeClass('on');
                        $('.right_gnb>li>ul').slideUp();
                    },300)
                });
                $('.right_gnb>li>a').click(function(){
                    
                    var check = $(this).hasClass('on');
                    if(check){
                        $(this).removeClass('on');
                        $(this).siblings('ul').stop(true,true).slideUp();
                    }else{
                        $('.right_gnb>li>a').removeClass('on');
                        $('.right_gnb>li>ul').stop().slideUp();
                        $(this).addClass('on');
                        $(this).siblings('ul').stop(true,true).slideDown();
                    }
                });
                $(window).resize(function(){
                    $('.right_gnbWrap').removeClass('on');
                });
            });