Bổ sung sub menu cho menu chỉ có 1 cấp – Add sub menu for menu only have one level

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.

Hình 1. Thanh menu ngang chỉ có 1 cấp

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é

Hình 2. Menu đã có thêm 1 cấp bên dưới.

Hy vọng hữu ích với bạn!

Nosomovo

Chia sẻ lên
WEB5k - Thiết kế website giá rẻ chuẩn SEO

Hãy bình luận đầu tiên

Để lại một phản hồi