Tạo Menu Dropdown Cơ Bản

Để tạo Menu Dropdown bằng CSS, điều cơ bản đầu tiên chúng ta phải hiểu rõ 2 thuộc tính absoluterelative bạn nào chưa hiểu thì thể tham khảo ở đây.

Chúng ta bắt đầu làm Menu Dropdown bằng CSS nhé. Đầu tiên chúng dùng <ul> để tạo khu vực trong menu và <li> để tạo từng mục trong menu đó. Chúng ta sẽ tạo HTML như sau:

<div id="menu">
		<ul>
		    <li><a href="#">Trang Chủ</a></li>
			<li><a href="#">Giới thiệu</a></li>
			<li><a href="#">Dịch vụ</a></li>
			<li><a href="#">Liên hệ</a></li>
		</ul>
</div>

Và Css cho đẹp hơn nhé ( Đã hướng dẫn trong bài trước xem lại tại đây )

/*RESET CSS*/
*{
	padding: 0;
	margin: 0;
}
#menu ul{
	list-style: none;
	text-align: center;
}
#menu ul li{
	display: inline-block;
	width: 120px;
	height: 30px;
	line-height: 30px;
	margin-left: -5px;/*mặc định của "display: inline-block" là margin-left:5 */
	background: #11B9D9
}
#menu a{
	text-decoration: none;
	color: white;
	display: block; /*ôm trọn khối*/
}

Kết quả:

Sau đó thêm Menu con của Dịch vụ,lưu ý để nằm trong thẻ <li> . Chúng ta vẫn dùng <ul> để tạo khu vực và ,<li> để tạo từng mục trong menu

<div id="menu">
		<ul>
		    <li><a href="#">Trang Chủ</a></li>
			<li><a href="#">Giới thiệu</a></li>
			<li><a href="#">Dịch vụ</a>
<!--				Menu Con-->
		           <ul>
		              <li><a href="#">Hỗ trợ</a></li>
			      <li><a href="#">Thông tin</a></li>
		           </ul>
<!--				Menu Con-->
			</li>
			<li><a href="#">Liên hệ</a></li>
		</ul>
	</div>

Kết quả:

Bây giờ, chúng ta muốn tùy biến lại cái Menu con sẽ hiển thị nằm bên ngoài cái phần #menu ul để nó không bị đẩy lên như vậy. Như bài absolute và relative ta đã nói qua, để tùy biến vị trí một phần tử mà không ảnh hưởng đến các phần tử khác thì sẽ sử dụng thuộc tínhposition. Nhưng mà chúng ta muốn cái Menu con nó phải nằm gần menu mẹ, vậy thì chúng ta phải thiết lập #menu li thành kiểu relative vì #menu li là các item cấp lớn nhất, mình gọi đó là menu mẹ.

#menu ul li{
	display: inline-block;
	width: 120px;
	height: 30px;
	line-height: 30px;
	margin-left: -5px;/*mặc định của "display: inline-block" là margin-left:5 */
	background: #11B9D9;
	position: relative; /* thiết lập kiểu relative */
}

Và tiếp theo là cho cái Menu con thành kiểu absolute để nó luôn luôn nằm trong phạm vi menu mẹ, tức là nằm trong #menu li ấy. Chúng ta viết lại đoạn Menu con như sau:

#menu ul li ul{
	position: absolute;
	top: 31px;/*canh chỉnh vị trí*/
	left: 4px;/*canh chỉnh vị trí*/
}

Kết quả

Chúng ta sẽ dùng visibility: hidden để ẩn menu con

#menu ul li ul{
	position: absolute;
	top: 31px;/*canh chỉnh vị trí*/
	left: 4px;/*canh chỉnh vị trí*/
	visibility: hidden; /*ẩn menu con*/
}

Kết quả

Sau cùng ta sẽ dùng hover: để hiện menu con khi mình rê chuột vào nhé

#menu ul li:hover ul{
	visibility: visible;
}

Kết quả là ta đã có 1 menu dropdown cơ bản