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.
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é
Hy vọng hữu ích với bạn!
Nosomovo
