• 코드:
​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-button {
9
            background-color: #FFDAB9;
10
            padding: 8px;
11
            font-size: 15px;
12
            border: none;
13
        }
14
        .dropdown {
15
            position: relative;
16
            display: inline-block;
17
        }
18
        .dropdown-content {
19
            display: none;
20
            position: absolute;
21
            background-color: #FFDAB9;
22
            min-width: 75px;
23
            padding: 5px;
24
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
25
        }
26
        .dropdown-content a {
27
            color: black;
28
            padding: 8px;
29
            text-decoration: none;
30
            display: block;
31
        }
32
        .dropdown-content a:hover { background-color: #CD853F; }
33
        .dropdown:hover .dropdown-content { display: block; }
34
        .dropdown:hover .dropdown-button { background-color: #CD853F; }
35
    </style>
36
</head>
37
​
38
<body>
39
​
40
    <h1>드롭다운 메뉴</h1>
41
    <div class="dropdown">
42
        <button class="dropdown-button">Dropdown</button>
43
        <div class="dropdown-content">
44
            <a href="#">HTML</a>
45
            <a href="#">CSS</a>
46
            <a href="#">JAVA</a>
47
            <a href="#">C++</a>
48
        </div>
49
    </div>
50
​
51
</body>
52
​
53
</html>