서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?

서브메뉴가 아래 같이 유지되지 않고 사라지네요. 어디가 잘못일까요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="main-content">
            <div class="left">
                <header>
                    <div class="headerlogo"></div>
                    <div class="navi">
                        <!-- navigation -->
                        <ul class="menu">
                            <li>
                                <a href="#none">CLUB</a>
                                <div class="submenu">
                                    <a href="#none">클럽소개</a>
                                    <a href="#none">시설안내</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">BOOKING</a>
                                <div class="submenu">
                                    <a href="#none">요금안내</a>
                                    <a href="#none">예약안내</a>
                                    <a href="#none">위약안내</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">INFORMATION</a>
                                <div class="submenu">
                                    <a href="#none">명예의 전당</a>
                                    <a href="#none">이벤트</a>
                                    <a href="#none">자료실</a>
                                    <a href="#none">포토갤러리</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">COMMUNITY</a>
                                <div class="submenu">
                                    <a href="#none">공지사항</a>
                                    <a href="#none">Q&A</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="spotmenu"></div>
                </header>
            </div>
            <div class="right">
                <div class="slide">
                    <div class="slideimg"></div>
                    <div class="slidebanner"></div>
                </div>
                <div class="items">
                    <div class="shortcut"></div>
                    <div class="newsgallery"></div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer-logo"></div>
            <div class="copyright"></div>
            <div class="sns"></div>
        </footer>
    </div>

    <script type="text/javascript" src="/script/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="/script/custom.js"></script>
</body>
</html>

@charset "utf-8";

body {
    margin: 0;
    background-color: #fff;
    color: #333;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {}
.main-content {
    display: flex;
}
.main-content > div{
    border: 1px solid gray;
    /* height: 800px; */
}
.left {
    width: 200px;
}
.right {
    flex : 1
}

header {}
header > div {
    border: 1px solid red;
}
.headerlogo {
    height: 100px;
}
.navi {
    height: 400px;
}
.spotmenu {
    height: 100px;  
}

.slide {
    position: relative;
    height: 400px;
}
.slide > div {
    border: 1px solid blue;
    /* height: 400px;    */
}
.slideimg {
    height: 400px;
}
.slidebanner {
    position: absolute;
    top: 0;
    right: 0;
    height: 300px;
    width: 100px;
}

.items {}
.items > div {
    border: 1px solid green;
}
.shortcut {
    height: 200px;
}
.newsgallery {
    height: 250px;
}

footer {
    display: flex;
}
footer > div {
    border: 1px solid orange;
    height: 100px;
}
.footer-logo {
    width: 200px;
}
.copyright {
    flex: 1
}
.sns{
    width: 300px;
}

/* navagation */    
.menu {
    list-style: none;
    padding: 0;
    width: 90%;
    margin: auto;
    margin-top: 15px;

    
}
.menu li {
    position: relative;
    text-align: center;
}
.menu li > a {
    border: 1px solid black;
    display: block;
    padding: 5px;
    transition: 0.5s;
}
.menu li:hover > a {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}
.submenu {
    border: 1px solid black;
    display: none;

    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    height: 150px;
}
.submenu a {
    display: block;
    padding: 5px;
    transition: 0.5s;
}
.submenu a:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

// navigation

$('.menu li').mouseenter(function(){
    $(this).children('.submenu').slideDown()
})
$('.menu li').mouseleave(function(){
    $(this).children('.submenu').slideUp()
})

인프런 커뮤니티 질문&답변