브라우저 제목

드롭다운 http://comlearn.co.kr/project1/index.html

가로 drop-down 네비게이션 http://comlearn.co.kr/project1/h-nav-dropdown.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>가로 네비 드롭다운</title>
        <link rel="stylesheet" href="css/h-drop-style.css">
    </head>
    <body>
        <nav class="main">
            <ul>
                <li><a href="#">네비게이션1</a>
                    <ul class="drop-down">
                        <li><a href="#">네비1-1</a></li>
                        <li><a href="#">네비1-2</a></li>
                        <li><a href="#">네비1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">네비게이션2</a></li>
                <li><a href="#">네비게이션3</a></li>
                <li><a href="#">네비게이션4</a></li>
                <li><a href="#">네비게이션5</a></li>
            </ul>
        </nav>
    </body>
</html>

 

css

@charset "utf-8";
html,body{
    margin:0;
    font-family:"맑은 고딕";
}
a{
    color:#333;
    text-decoration:none;
}
a:hover{
    color:black;
}
table,th,td{
    border:1px solid black;
    border-collapse:collapse;
}
img{
    vertical-align:bottom;
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

/* 메인 네비 */
nav.main{
    width:800px;
    height:50px;
    border:1px solid black;
    margin:auto;
}

nav.main>ul{
    height:80%;
    margin-top:5px;
}

nav.main>ul>li{
    list-style:none;
    float:left;
    background-color:orange;
    width:18%;
    margin-left:1.666%;
    height:100%;
    position:relative;
    
}
nav.main>ul>li>a{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
nav.main>ul>li>a:hover{
    background-color:black;
    color:white;
}
.drop-down{
    position:absolute;
    width:100%;
    height:auto;
    border:none;
    height:0;
    overflow:hidden;
    transition:0.5s;
}
.drop-down>li{
    list-style:none;
    background-color:darkorange;
    padding:0 10px;
    
}

.drop-down>li>a{
    display:block;
    width:100%;
    background-color:darkorange;
    padding:10px 0;
    border-bottom:1px dashed black;
}

.drop-down>li:last-child a{
    border-bottom:none;
}

nav.main>ul>li:hover .drop-down{
    height:150px;
}

 

dorp-down 세로 네비게이션 http://comlearn.co.kr/project1/v-nav-dropdown.html

html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>세로 네비 드롭다운</title>
        <link rel="stylesheet" href="css/v-drop-style.css">
    </head>
    <body>
        <nav class="main">
            <ul>
                <li><a href="#">네비게이션1</a>
                    <ul class="drop-down">
                        <li><a href="#">네비1-1</a></li>
                        <li><a href="#">네비1-2</a></li>
                        <li><a href="#">네비1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">네비게이션2</a>
                    <ul class="drop-down">
                        <li><a href="#">네비2-1</a></li>
                        <li><a href="#">네비2-2</a></li>
                        <li><a href="#">네비2-3</a></li>
                        <li><a href="#">네비2-4</a></li>
                    </ul>
                </li>
                <li><a href="#">네비게이션3</a></li>
                <li><a href="#">네비게이션4</a></li>
                <li><a href="#">네비게이션5</a></li>
            </ul>
        </nav>
    </body>
</html>

 

css

@charset "utf-8";
html,body{
    margin:0;
    font-family:"맑은 고딕";
}
a{
    color:#333;
    text-decoration:none;
}
a:hover{
    color:black;
}
table,th,td{
    border:1px solid black;
    border-collapse:collapse;
}
img{
    vertical-align:bottom;
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

/* 메인 네비 */
nav.main{
    width:250px;
    height:auto;
    border:1px solid black;
    margin-left:50px;
}

nav.main>ul{
    width:80%;
    height:auto;
    margin:auto;
}

nav.main>ul>li{
    list-style:none;
    background-color:orange;
    width:100%;
    margin-left:1.666%;
    height:100%;
    position:relative;
    
}
nav.main>ul>li>a{
    width:100%;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid #ececec;
}
nav.main>ul>li>a:hover{
    background-color:black;
    color:white;
}
.drop-down{
    position:relative;
    width:100%;
    height:auto;
    border:none;
    overflow:hidden;
    height:0;
    transition:0.5s;
}
.drop-down>li{
    list-style:none;
    background-color:darkorange;
    padding:0 10px;
    height:40px;
    
}

.drop-down>li>a{
    display:block;
    width:100%;
    background-color:darkorange;
    padding:10px 0;
    border-bottom:1px dashed black;
}

.drop-down>li:last-child a{
    border-bottom:none;
}

nav.main>ul>li:hover .drop-down{
    height:120px;
}
nav.main>ul>li:nth-child(2):hover .drop-down{
    height:160px;
}

제목 날짜
bxslider 썸네일 옵션 2020.02.19
bx슬라이더 bx-wrapper, bx-pager, pager 링크 css 2020.02.19
bx슬라이더 좌우 화살표 css file 2020.02.18
drop down 네비게이션 2020.02.17
회원가입 페이지 2020.02.07
로그인 페이지-3 2020.02.06
로그인 페이지-2 2020.02.05
테이블1 2020.02.04
로그인 페이지-1 2020.02.03
우리집 고양이-6 2020.02.03
우리집 고양이 페이지-5 2020.01.31
우리집 야용이 페이지-4 file 2020.01.30
우리집 고양이 태그, css 이해 연습1 file 2020.01.29
우리집 고양이-2 file 2020.01.28
우리집 야옹이 페이지-1 file 2020.01.23
세번째 HTML코드 2020.01.17
두번째 HTML 코드 2020.01.15
첫번째 태그 코드 2020.01.14
html(기초)-세번째 시간-태그의 속성, 기본 텍스트 Html 2019.12.16
html(기초)-두번째 시간-태그의 사용 및 메타 태그 file 2019.12.16
태그 목록