코딩 복습

2020/06/18 세로 메뉴 연습

개발경범 2020. 6. 18. 09:34

<HTML>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/menu.css">
    <title>남도맛기행</title>
</head>

<body>

    <div id="wrap">

        <aside>
            <h1 class="logo">LOGO</h1>

            <ul class="gnb">
                <li><a href="#">축제소개</a>
                    <ul class="sub">
                        <li><a href="#">Festival 소개</a></li>
                        <li><a href="#">행사장 안내</a></li>
                        <li><a href="#">조직위원회</a></li>
                    </ul>
                </li>
                <li><a href="#">예약안내</a>

                    <ul class="sub">
                        <li><a href="#">예약하기</a></li>
                        <li><a href="#">예약확인/취소</a></li>
                        <li><a href="#">단체에약문의</a></li>
                    </ul>
                </li>
                <li><a href="#">아티스트</a>
                    <ul class="sub">
                        <li><a href="#">고릴라즈</a></li>
                        <li><a href="#">메이저 레이저</a></li>
                        <li><a href="#">아우스게인</a></li>
                        <li><a href="#">타임로드</a></li>
                    </ul>
                </li>
                <li><a href="#">커뮤니티</a>
                    <ul class="sub">
                        <li><a href="#">공지사항</a></li>
                        <li><a href="#">사진갤러리</a></li>
                        <li><a href="#">영상갤러리</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        </aside>
        <main>        </main>

            <nav>
           





    </div>

</body>

</html>

<CSS>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


a {

    color: inherit;
    text-decoration: none;
}

ul,
li {


    list-style: none;
}

#wrap {

    width: 1000px;
    height: auto;
}

aside {


    width: 200px;
    height: 650px;
    border: 1px solid black;
    float: left;
}

main {

    width: 800px;
    height: 650px;
    background: tomato;
    float: left;
}


aside .logo {

    width: 200px;
    height: 100px;
    background-color: violet;
    text-align: center;
    line-height: 100px;
}

aside nav {

    width: 180px;
    height: auto;

}


aside .gnb>li {

    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 200px;
    background-color: antiquewhite;
    border-bottom: 1px solid #333;
    position: relative;

}

/* aside .gnb>li a {

    display: block;
} */

aside .gnb>li:hover {


    background-color: lightcoral;
}

aside .gnb>li:hover .sub {

    display: block;
}


aside .gnb li .sub {

    width: 180px;
    height: 300px;
    position: absolute;
    left: 100%;
    top: 0;
    /* outline: 1px solid magenta; */
    background: orange;
    display: none;
}

aside .gnb li .sub li {

    line-height: 35px;
    /* background-color: maroon; */
    color: white;
}

aside .gnb li .sub li:hover{
    background-color: sienna;
}

aside .gnb li .sub li a {
    display: block;
}