JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- JS CODE-->

          <ul id="main-navigation">
                    <li class="sub-menu">
                        <a href="#" class="nav-title">학교소개</a>
                            <div class="nav-list">
                                <ul class="header-list">
                                    <li><a href="#">인사말</a></li>
                                    <li><a href="#">규정</a></li>
                                    <li><a href="#">캠퍼스 소개</a></li>
                                    <li><a href="#">찾아오시는 길</a></li>
                                </ul>
                            </div>
                    </li>
                    <li class="sub-menu">
                        <a href="#" class="nav-title">전공안내</a>
                            <div class="nav-list">
                                <ul class="header-list">
                                    <li><a href="#">체육학</a></li>
                                    <li><a href="#">전공소개</a></li>
                                    <li><a href="#">졸업 후 진로</a></li>
                                    <li><a href="#">교육 프로그램</a></li>
                                    <li><a href="#">교수소개</a></li>
                                </ul>
                            </div>
                    </li>
                    <li class="sub-menu">
                        <a href="#" class="nav-title">입학안내</a>
                            <div class="nav-list">
                                <ul class="header-list">
                                    <li><a href="#">모집요강</a></li>
                                    <li><a href="#">원서접수</a></li>
                                    <li><a href="#">입학문의</a></li>
                                    <li><a href="#">FAQ</a></li>
                                </ul>
                            </div>
                    </li>
                    <li class="sub-menu">
           ...

CSS

#main-navigation > li {
  list-display : none;
  display : inline-block;
  position : relative;
  padding: 10px;
}
.sub-menu .nav-list{
  position: absolute;
  top: 100px;
  width: auto;
  display: block;
  background: red;
}

JavaScript

$(document).ready(function(){
         var HoverTimeOut;
  $(this).find('.nav-list').hide();
    $('#main-navigation > li').hover(
        function(){
            clearTimeout(HoverTimeOut);
            //$(this).find(".nav-list").show();
            $('.nav-list').hide();
            $(this).find(".nav-list").show();
        },
        function(){
        	HoverTimeOut = setTimeout(function(){
            $('.nav-list').hide();
          }, 200)
            
        }
    );
    
   /*  $('.sub-menu .nav-list').hover(
        function(){
        //does nothing
        //alert('hover');
        },
        function(){
          console.log($(this));
          $('.nav-list').hide();
        }
    ); */
   
    $(".nav-title").click(function(){
        var ww = $(window).width();
        if(ww > 640){
            $(this).next().toggle();
            return false;
        }
    });
        });