[CSS] hover 드롭다운 메뉴 예제

CSS 2016. 1. 26. 10:12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
 
    ul {
        list-style:none; 
        margin:0px; 
        padding:0px;
        border:1px solid #000;
    }
    ul {
        width: 100px;
    }
    li { 
        /* width: 100px; height: 30px; */
        background: pink;
    }  
    li:hover {
        background: skyblue;
    }
    li:hover > ul {
        display:block;
    } 
    .nav {
        position: relative;
    }
    .nav ul {
        position: absolute;
        display: none;
    }
    .depth1 {
        /* top :30px;*/
        top: 100%;
        /* left: 100%;*/
 
    }
    .depth2 {
        /*  top :30px; left: 70px;*/
        left: 100%;
        top: 0;        
    }
 
</style>   
</head>
    <body>
        <ul class="nav">
            <li> 메뉴
                <ul class="depth1">
                    <li> sub1
                        <ul class="depth2">
                            <li>sub2</li>
                            <li>sub2</li>
                            <li>sub2</li>
                            <li>sub2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>


반응형
저작자표시

'CSS' 카테고리의 다른 글

[CSS] box-sizing: border-box  (0) 2016.02.03
[CSS] 형제 요소 선택자  (0) 2016.01.26
[CSS] hr태그 1px 라인 적용  (0) 2016.01.12
CSS문서에 문자셋을 지정하면 에디터에서 한글이 깨지지 않는다.  (0) 2015.12.24
[CSS] first-child, first-of-type 차이  (0) 2015.12.15
Posted by 힘없는염소
,

티스토리툴바