![sub-menu](https://i0.wp.com/nosomovo.xyz/wp-content/uploads/2019/06/sub-menu.jpg?resize=365%2C271&ssl=1)
Website chúng ta có 1 thanh menu. Nhưng thanh menu này chỉ có 1 cấp thôi không có sub như hình bên dưới đây.
![](https://i0.wp.com/nosomovo.xyz/wp-content/uploads/2019/06/Menu-have-only-one-level.jpg?resize=678%2C51&ssl=1)
Vậy để chỉnh cho menu này hiển thị được sub menu chúng ta chỉ cần thực hiện một số thao tác ngắn gọn sau.
Bước 1: Thêm đoạn mã html của sub menu sau vào menu chính như hình bên dưới (Có mã kèm theo).
Mã:
<li> <a> Have subs </a> <ul> <li><a>Sub1</a></li> <li><a>Sub2</a></li> </ul> </li>
Bước 2: Thêm đoạn CSS dành cho sub menu này vào.
.navbar-nav li ul{ display: none; position: absolute; list-style-type: none; padding: 0; } .navbar-nav li:hover ul{ display: block; padding-top: 28px; } .navbar-nav li:hover ul li a{ padding: 5px 15px; margin: 1px 0px; border: solid 1px #55a200; border-radius: 25px 0px; color: #55a200; line-height: 24px; display: inline-block; background: white; min-width: 100px; } .navbar-nav li:hover ul li a:hover{ background: #55a200; color: #fff; border: solid 1px #fff; }
Bước 3: Chạy và xem kết quả nhé
![](https://i0.wp.com/nosomovo.xyz/wp-content/uploads/2019/06/Multi-level-menu.jpg?resize=678%2C130&ssl=1)
Hy vọng hữu ích với bạn!
Nosomovo