Hướng dẫn tạo menu dropdown với HTML, CSS và JAVASCRIPT - Thêm CSS RUN
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <style>
6
            .container {
7
                width: 70%;
8
                margin: auto;
9
                text-align: center;
10
            }
11
            /* Dropdown Button */
12
            .dropbtn {
13
                background-color: #4CAF50;
14
                color: white;
15
                padding: 16px;
16
                font-size: 16px;
17
                border: none;
18
                cursor: pointer;
19
            }
20
21
            /* ĐỔi màu nền khi hover và focus Dropdown button */
22
            .dropbtn:hover, .dropbtn:focus {
23
                background-color: #3e8e41;
24
            }
25
26
            /* Định dạng các thẻ bao bọc các menu */
27
            .dropdown {
28
                position: relative;
29
                display: inline-block;
30
            }
31
32
            /* Dropdown Content, mặc định sẽ được ẩn đi */
33
            .dropdown-content {
34
                display: none;
35
                position: absolute;
36
                background-color: #f9f9f9;
37
                min-width: 160px;
38
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
39
                z-index: 1;
40
            }
41
42
            /* Định dạng các thẻ a là các menu con */
43
            .dropdown-content a {
44
                color: black;
45
                padding: 12px 16px;
46
                text-decoration: none;
47
                display: block;
48
            }
49
50
            /* Thay đổi màu nền khi các menu con được hover */
51
            .dropdown-content a:hover {background-color: #f1f1f1}
52
53
            /* Hiển thị menu, ta sẽ dùng javascript để thêm class này vào các nôi dung cần được hiển thị */
54
            .show {display:block;}
55
        </style>
56
    </head>
57
    <body>
58
        <div class="container">
59
            <h2>Freetuts.net hướng dẫn tạo Menu Dropdown</h2>
60
            <div class="dropdown">
61
                <button value="laptrinh" class="dropbtn">Lập trình</button>
62
                <div id="laptrinh" class="dropdown-content">
63
                    <a href="#">PHP</a>
64
                    <a href="#">CSS</a>
65
                    <a href="#">HTML</a>
66
                </div>
67
            </div>
68
            <div class="dropdown">
69
                <button value="thuthuat" class="dropbtn">Thủ thuật</button>
70
                <div id="thuthuat" class="dropdown-content">
71
                    <a href="#">Thủ thuật window</a>
72
                    <a href="#">Download</a>
73
                    <a href="#">Phần cứng</a>
74
                </div>
75
            </div>
76
        </div>
77
    </body>
78
</html>
PHÓNG TO