Hướng dẫn tạo menu đa cấp sử dụng HTML và CSS

Menu đa cấp được sử dụng rất nhiều trong các website, nó mang lại sự tiện lợi cho việc hiển thị các hệ thống có đa danh mục. Trong bài viết này Softvietdesign.com hướng dẫn các bạn tạo menu đa cấp bằng HTML CSS một cách tiện lợi dễ hiễu nhất nhé.

Cấu trúc thư mục

--style.css

--images-background

--index.html

Nội dung code HTML

        <ul>
            <li class="active"><a href="/"><i class="fa fa-home" aria-hidden="true"></i> Trang chủ</a></li>
            <li><a href="/"><i class="fa fa-user" aria-hidden="true"></i> Giới thiệu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="box-submenu">
                    <ul>
                        <li><a href="/">Về chúng tôi</a></li>
                        <li><a href="/">Đội ngũ nhân viên</a></li>
                        <li><a href="/">Tầm nhìn - Sứ mệnh</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="/"><i class="fa fa-server" aria-hidden="true"></i> Chuyên mục <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="box-submenu">
                    <ul>
                        <li><a href="/">Thiết kế giao diện website</a></li>
                        <li><a href="/">Phát triển dự án</a></li>
                        <li><a href="/">Lập trình Website</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="/"><i class="fa fa-clone" aria-hidden="true"></i> Dịch vụ <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="box-submenu">
                    <ul>
                        <li class="submenu-hover"><a href="/">Thiết kế website trọn gói </a><i class="fa fa-angle-right" aria-hidden="true"></i>
                            <div class="box-submenu-2">
                                <ul>
                                    <li><a href="/">Laravel</a></li>
                                    <li><a href="/">ASP.NET(C#)</a></li>
                                    <li><a href="/">Wordpress</a></li>
                                    <li><a href="/">Java</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="submenu-hover"><a href="/">App</a><i class="fa fa-angle-right" aria-hidden="true"></i>
                            <div class="box-submenu-2">
                                <ul>
                                    <li><a href="/">Android App</a></li>
                                    <li><a href="/">iOS App</a></li>
                                    <li><a href="/">Unity App</a></li>
                                    <li><a href="/">Android App</a></li>
                                    <li><a href="/">iOS App</a></li>
                                    <li><a href="/">Unity App</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="/">Tên miền</a></li>
                        <li><a href="/">Hosting</a></li>
                        <li><a href="/">Wordpress</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="/"><i class="fa fa-inr" aria-hidden="true"></i> Bảng giá</a></li>
            <li><a href="/"><i class="fa fa-apple" aria-hidden="true"></i> Ứng dụng</a>
                
            </li>
            <li><a href="/"><i class="fa fa-users" aria-hidden="true"></i> Khách hàng</a></li>
            <li><a href="/"><i class="fa fa-phone" aria-hidden="true"></i> Liên hệ</a></li>
        </ul>
    

Nội dung Code CSS của menu đa cấp

   body{
    margin: 0;padding: 0;
    background: url(imager_4_53459_700.jpg) no-repeat top left;
    background-size: cover;
    font-family: sans-serif;
    overflow: hidden;
}

*{
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
}

.box-menu{ 
    background-color: #0B1CA9;
    text-align: center;
 }
 .box-menu ul{ 
    display: inline-flex;
    list-style: none;
    color: #fff;
 }
 .box-menu ul li{ 
    width: 170px;
    margin: 5px;
    padding: 15px;
 }

 .box-menu ul li a{ 
    color: #fff;
    text-decoration: none;
 }
.active,.box-menu ul li:hover{ 
    background:#3406D1;
    border-radius: 3px;
}
.box-menu .fa{ 
    margin-right: 5px;
 }

 .box-submenu{
     display: none;
 }
 .box-menu ul li:hover .box-submenu{
    display: block;
    position: absolute;
    background: #0B2FD2;
    margin-top: 15px;
    margin-left: -15px;
}
.box-menu ul li:hover .box-submenu ul{
    display: block;
    margin: 0px;padding: 0px;
}
.box-menu ul li:hover .box-submenu ul li{
    width: 220px;
    text-align: left;
    border-bottom: dotted 1px #fff;
    background: transparent;
    border-radius: 0;
    padding: 15px;
    margin: 10px;
}
.box-menu ul li:hover .box-submenu ul li:last-child{
    border-bottom: none;
}
.box-menu ul li:hover .box-submenu ul li a:hover{
    color: yellowgreen;
}
.fa-angle-right{
    float: right;
}
.box-submenu-2{
    display: none;
}
.submenu-hover:hover .box-submenu-2{
    display: block;
    position: absolute;
    margin-top: -44px;
    margin-left: 210px;
    background: #0733F6;
}

Các bạn có thể tải code về tham khảo ở link bên dưới nhé.

Click để tải về code DropdownMenu

Video hướng dẫn chi tiết