A3 내비게이션이 슬라이드 이미지에 가려져 앞으로 오지 않습니다.

A3 뿐만 아니라 나머지도 앞으로 오지 않아서 질문합니다 ㅠㅠ

(공지사항, 갤러리는 아직 만들지 않은 상태이며 여기 올려놓은 코드는 A3입니다...!

주석 처리시킨 이상한 메모는 무시해주세요 ㅠㅠ)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/custom.js"></script>
    <title>A3</title>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-logo">
                <a href="#">
                    <img src="img/headerlogo.png" alt="header-logo">
                </a>
            </div>
            <div class="navi">
                <ul class="menu">
                    <li>
                        <a href="#">강원천문대</a>
                        <div class="sub-menu">
                            <a href="#">천문대소개</a>
                            <a href="#">인사말</a>
                            <a href="#">오시는길</a>
                        </div>
                    </li>
                    <li>
                        <a href="#">이용안내</a>
                        <div class="sub-menu">
                            <a href="#">프로그램</a>
                            <a href="#">관람시간표</a>
                            <a href="#">이달의별자리</a>
                        </div>
                    </li>
                    <li>
                        <a href="#">천문대예약</a>
                        <div class="sub-menu">
                            <a href="#">예약하기</a>
                            <a href="#">예약확인</a>
                            <a href="#">예약취소</a>
                            <a href="#">정보서비스</a>
                        </div>
                    </li>
                    <li>
                        <a href="#">커뮤니티</a>
                        <div class="sub-menu">
                            <a href="#">프로그램</a>
                            <a href="#">공지사항</a>
                            <a href="#">자유게시판</a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <div class="slide">
            <div class="slide-items">
                <a class="slide-item" href="#">
                    <img src="img/slide1.png" alt="slide1">
                </a>
                <a class="slide-item" href="#">
                    <img src="img/slide2.png" alt="slide2">
                </a>
                <a class="slide-item" href="#">
                    <img src="img/slide3.png" alt="slide3">
                </a>
            </div>
        </div>
        <div class="items">
            <div class="notice"></div>
            <div class="banner">
                <a href="#">
                    <img src="img/banner.jpg" alt="banner">
                </a>
            </div>
            <div class="direct">
                <a href="#">
                    <img src="img/direct.png" alt="direct">
                </a>
            </div>
        </div>
        <footer>
            <div class="footer-logo">
                <a href="#">
                    <img src="img/footerLogo.png" alt="footer-logo">
                </a>
            </div>
            <div class="footer-menu">
                <div>
                    <a href="#">
                        하단메뉴1
                    </a>
                    <a href="#">
                        하단메뉴2
                    </a>
                    <a href="#">
                        하단메뉴3
                    </a>
                </div>
                <div>
                    COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
                </div>
            </div>
        </footer>
    </div>
</body>
</html>

@charset "utf-8";

body{
    margin: 0;
    font-size: 15px;
    background-color: #fff;
    color: #333333;
}

a{
    text-decoration: none;
    color: #333333;
}

.container{
/*     border: 1px solid red; */
    width: 1200px;
    margin: auto;
}

header{
    background-color: rgb(150, 167, 236);
    height: 100px;
}
header div{
/*     border: 1px solid blue; */
    height: 100px;
}
.header-logo{
    width: 200px;
    float: left;
}
.navi{
    width: 600px;
    float: right;
}

.slide{
    width: 1200px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.slide-items{
    position: relative;
}
.slide-item{
    position: absolute;
    top: 0;
    left: 0;
}
.slide div{
/*     border: 1px solid green; */
    height: 300px;
}

.items{
    overflow: hidden;
}
.items div{
/*     border: 1px solid violet; */
    box-sizing: border-box;
    float: left;
    height: 200px;
}
.notice{
    width: 500px;
}
.banner{
    width: 350px;
}
.direct{
    width: 350px;
}

footer{
    background-color: rgb(222, 222, 222);
    overflow: hidden;
}
footer>div{
/*     border: 1px solid salmon; */
    height: 100px;
    float: left;
    box-sizing: border-box;
}
/*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/
.footer-logo{
    width: 200px;
}
.footer-menu{
    width: 1000px;
}
.footer-menu div{
/*     border: 1px solid blueviolet; */
    height: 50px;
}

/*모듈 이외 부분*/
.header-logo, .footer-logo{
    text-align: center;
    line-height: 130px;
}
.footer-menu{
    text-align: center;
    padding-top: 15px;
}
.footer-menu>div a{
    padding: 10px;
}
.banner a>img, .direct a>img{
    width: 350px;
    height: 200px;
}

/*내비게이션*/
.menu{
    list-style: none; /* 점(목록에 쓰이는거) 없애줌*/
    padding: 0; /*왼쪽 패딩 제거*/
    margin-top: 35px;
}
.menu li{
    border: 1px solid black;
    float: left;
    width: 150px;/*25%로 해도 됨*/
    box-sizing: border-box;
    text-align: center;
}
.menu li>a{
    /*기초 틀을 잡았으면, 모양을 만들자!*/
    border: 1px solid black;
    display: block;
    padding: 5px;
}
.menu li:hover>a{
    /*주의사항: .menu li>a:hover가 아니라 .menu li:hover>a임.
    우리느 지금 박스에 호버를 줄꺼지 텍스트에 호버 줄껀 아니잖아*/
    background-color: black;
    color: #fff;
    transition: 0.5s;
}
.sub-menu{
    border: 1px solid black;
    background-color: #fff;
    display: none;
}
.sub-menu a{
    display: block; /*배치!!*/
    padding: 5px;
}
.sub-menu a:hover{
    background-color: black;
    color: #fff;
    transition: 0.5s;
}

$(document).ready(function(){
    /*Navigation*/
    $('.menu li').mouseenter(function(){
        $(this).children('.sub-menu').stop().slideDown();
    });
    $('.menu li').mouseleave(function(){
        $(this).children('.sub-menu').stop().slideUp();
    });

    /*Slide*/
    $('.slide-item:gt(0)').hide();
    setInterval(function(){
        $('.slide-item:first-child').fadeOut(500).next().fadeIn(500);
        $('.slide-item:first-child').appendTo('.slide-items');
    }, 3000);
});

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