• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Dropdowns</title>
7
    <style>
8
        .dropdown {
9
            position: relative;
10
            display: inline-block;
11
        }
12
        .dropdown-content {
13
            display: none;
14
            position: absolute;
15
            background-color: #F9F9F9;
16
            min-width: 160px;
17
            padding: 8px;
18
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
19
        }
20
        .dropdown:hover .dropdown-content { display: block; }
21
    </style>
22
</head>
23
​
24
<body>
25
​
26
    <h1>드롭다운 효과</h1>
27
    <div class="dropdown">
28
        <span>여기에 마우스를 올려보세요!</span>
29
        <div class="dropdown-content">
30
            <p>마우스를 올려야 나타나는 div 요소입니다!</p>
31
        </div>
32
    </div>
33
​
34
</body>
35
​
36
</html>