Hướng dẫn tạo Click Dropdown với HTML, CSS và JAVASCRIPT

<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>

.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;}

<script>
    /* Thêm hoặc xóa class show ra khỏi phần tử */
    function myFunction(id) {
        document.getElementById(id).classList.toggle("show");
    }
    //lấy tất cả các button menu
    var buttons = document.getElementsByClassName('dropbtn');
    //lấy tất cả các thẻ chứa menu con
    var contents = document.getElementsByClassName('dropdown-content');
    //lặp qua tất cả các button menu và gán sự kiện
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function(){
            //lấy value của button
            var id = this.value;
            //ẩn tất cả các menu con đang được hiển thị
            for (var i = 0; i < contents.length; i++) {
                contents[i].classList.remove("show");
            }
            //hiển thị menu vừa được click
            myFunction(id);
        });
    }
    //nếu click ra ngoài các button thì ẩn tất cả các menu con
    window.addEventListener("click", function(){
         if (!event.target.matches('.dropbtn')){
            for (var i = 0; i < contents.length; i++) {
                contents[i].classList.remove("show");
            }
         }
    });
</script>