[CSS3] Menu đa cấp – Hướng dẫn cách tạo menu đa cấp bằng HTML CSS – Free

Ví dụ ta đặt danh mục “Ẩm thực” làm danh mục cha thì những danh mục con của nó phải nằm trong thẻ 

                Ẩm thực ▼
 
                
Món ăn miền Bắc
                    
Món ăn miền Trung
                    
Món ăn miền Nam
                    
Ẩm thực đường phố
                

Bước 2: Trang trí cho menu đẹp hơn bằng CSS

Chúng ta tiến hành tạo file style.css

/*
    Document   : style
    Created on : Mar 1, 2015, 8:21:25 PM
    Author     : Đỗ văn Thủy
    Website    : http://thuctaptot.com  
*/

* {
    margin:0px;
    padding:0px;
}
.clearfix:after {
    display:block;
    clear:both;          
}
.wrapper {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
    background:#3e3436;
}
 
/*----- Phần menu -----*/
.menu {
    width:1000px;
    margin:0px auto;
    background:#bf5c71;
    height: 50px;
    margin-top: 150px;
}
.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}
.menu a {
    transition:all linear 0.15s;
    color:#919191;
    text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#be5b70;
} 
.menu .arrow {
    font-size:11px;
    line-height:0%;
} 
/*----- css cho phần menu cha -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    color:white;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}
/*----css cho menu con----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}
.sub-menu li {
    display:block;
    font-size:16px;
}
.sub-menu li a {
    padding:10px 30px;
    display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

Kết quả:

Kết luận

Như vậy WebFree.Net đã hướng dẫn xong các bạn tạo menu đa cấp trong thiết kế web bằng html css rồi. Nếu có điều gì còn thắc mắc hãy bình luận phía dưới để được gải đáp. Chúc các bạn thành công!.

Tải source code tại đây.

Tài liệu tham khảo

• https://dichvuseogiarehanoi.com/tao-menu-da-cap-trong-thiet-ke-web-bang-html-css/