Tạo menu Dropdown đa cấp bằng CSS

Menu Dropdown hay còn gọi là xổ xuống  đây là dạng khi hover chuột menu cấp 2 sẽ hiện ra. Thường được sử dụng khi thiết kế website bằng HTML và CSS. Bài viết dưới đây sẽ hướng dẫn tạo Menu Dropdown bằng CSS với các bước thực hiệu khá đơn giản.

Tạo menu Dropdown đa cấp xổ xuống bằng CSS

Bước 1: Đầu tiên chúng ta sẽ tạo ra một file là menu.html trên máy tính với đoạn mã HTML như sau:

<html>

<head>

<style>

/* Mã CSS ở đây */

</style>

</head>

<body>

<div class='main-menu'>
<ul>
<li> <a href='#'>Trang chủ</a> </li>
<li> <a href='#'>Thủ Thuật Seo</a> </li>
<li> <a href='#'>Thủ Thuật WordPress</a> </li>
<li> <a href='#'>Dịch Vụ</a>
<ul class='sub-menu'>
<li><a href='#'>Quảng Cáo Facebook</a></li>
<li><a href='#'>Quảng Cáo Google</a></li>
<li><a href='#'>Dịch Vụ Seo Top Google</a></li>
</ul>
</li>
</ul>
</div>

</body>

</html>

Khi chưa có CSS trông sẽ như thế này

menu-dropdown-da-cap

Bước 2: Tiếp theo chúng ta thêm CSS vào cặp thẻ <head>...</head>

Trước tiên phải làm cho các liên kết nằm trên một hàng bằng mã

display: inline-block;

.main-menu ul li{
display: inline-block;
}

Tiếp theo ta trang trí một chút cho menu trông đẹp đơn bằng cách thêm background, chiều cao cho nó

.main-menu {

background: #ddd;
height: 50px;
padding: 20px;

}

Đặt chiều rộng width: 100%; chiều cao height là 50 và background là #ddd

– Đổi màu chữ thành màu đen, xóa bỏ gạch chân và padding

.main-menu ul li a {
color: #000;
text-decoration: none;
padding: 20px;
}

– Bây giờ sẽ ẩn menu cấp 2 đi bằng cách dùng display: none

.sub-menu {
display: none;
}

– Làm cho nó hiện ra khi hover chuột

.main-menu:hover .sub-menu{
display: block;
}

Tuy nhiên menu cấp 2 cần phải sắp xếp để chúng nằm theo chiều dọc dùng đoạn code sau

.main-menu .sub-menu li {
display: block;
}

Đoạn mã CSS đầy đủ bao gồm:

.main-menu ul li{
display: inline-block;
}
.main-menu {
background: #ddd;
height: 50px;
padding: 20px;
}
.main-menu ul li a {
color: #000;
text-decoration: none;
padding: 20px;
}
.sub-menu {
display: none;
padding: 20px;
}
.main-menu li {
position: relative;
}
.main-menu li:hover .sub-menu{
display: block;
}
.main-menu li .sub-menu{
position: absolute;
top: 20;
left: 0;
}
.main-menu .sub-menu li {
display: block;
background: #897;
width: 250px;
padding: 20px 0;
}

Giải thích:

  • Đầu tiên chúng ta sẽ thiết lập cho .main-menu li trở thành phần tử cha của .sub-menu bằng thuộc tính position: relative.
  • Tiếp theo đó sử dụng position: absolute; cho phần tử .sub-menu để căn chỉnh vị trí

Lưu ý: Để menu cấp 2 hiện ra cần phải thiết lập position: relative cho phần tử cha, position: absolute cho phần tử con.

Kết quả cuối cùng bạn đã tạo được một menu xổ xuống bằng CSS rồi đó:

dropdown-menu