Live Code Editor Version 2.0

Hướng dẫn tạo menu dropdown với HTML, CSS và JAVASCRIPT - Thêm CSS RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                width: 70%;
                margin: auto;
                text-align: center;
            }
            /* Dropdown Button */
            .dropbtn {
                background-color: #4CAF50;
                color: white;
                padding: 16px;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }
             
            /* ĐỔi màu nền khi hover và focus Dropdown button */
            .dropbtn:hover, .dropbtn:focus {
                background-color: #3e8e41;
            }
             
            /* Định dạng các thẻ bao bọc các menu */
            .dropdown {
                position: relative;
                display: inline-block;
            }
             
            /* Dropdown Content, mặc định sẽ được ẩn đi */
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }
             
            /* Định dạng các thẻ a là các menu con */
            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
             
            /* Thay đổi màu nền khi các menu con được hover */
            .dropdown-content a:hover {background-color: #f1f1f1}
             
            /* 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ị */
            .show {display:block;}
        </style>
    </head>
    <body>
        <div class="container">
            <h2>Freetuts.net hướng dẫn tạo Menu Dropdown</h2>
            <div class="dropdown">
                <button value="laptrinh" class="dropbtn">Lập trình</button>
                <div id="laptrinh" class="dropdown-content">
                    <a href="#">PHP</a>
                    <a href="#">CSS</a>
                    <a href="#">HTML</a>
                </div>
            </div>
            <div class="dropdown">
                <button value="thuthuat" class="dropbtn">Thủ thuật</button>
                <div id="thuthuat" class="dropdown-content">
                    <a href="#">Thủ thuật window</a>
                    <a href="#">Download</a>
                    <a href="#">Phần cứng</a>
                </div>
            </div>
        </div>
    </body>
</html>