Code HTML tạo menu click xổ xuống

5/5 - (2 bình chọn)

Zubi Cloud hướng dẫn Code HTML tạo menu click xổ xuống, How TO – Clickable Dropdown

code html tao menu click xo xuong 72889

Chèn đoạn code sau vào nơi cần hiển thị

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>

Chèn đoạn JS sau trên </head>

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!'.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {

Chèn đoạn CSS sau vào Style

.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;

.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;

.dropdown {
position: relative;
display: inline-block;

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
5/5 - (2 bình chọn)