Child menu 1 Child menu 2 Child menu 3 Child menu 4 Child menu 5
Tạo danh sách chọn dropdown html
Đây là hình Menu HTML mà không có CSS rules:
Thủ thuật
- Wordpress
- Seo
- Photoshop
- HTML
- CSS
- PHP
Kết quả khi chưa có CSS sẽ như thế này
Tiếp theo bạn thêm đoạn mã CSS vào thẻ … trong header
* {margin: 0; padding: 0} .menu {background: #333;height: 40px} .menu li{float: left; list-style: none; margin-right: 10px; padding: 10px 5px; width: 120px} .menu li:hover {background: #222;} .menu li a{color: #fff; text-decoration: none} .menu li ul li{display:none; width: 100px ;margin-top: 10px} .menu li:hover ul li{display: block}Kết quả khi thêm CSS vào một menu ngang hai cấp đã xuất hiện:
Giải thích:
.menu li ul li{display:none; width: 100px} đoạn này bạn sẽ dùng display: none để ẩn menu cấp 2 đi
.menu li:hover ul li{display: block} đoạn này là khi bạn rê chuột qua phần tử li cấp 1 thì danh sách menu cấp 2 sẽ xổ ra do bạn đặt là dispay: block
Kết luận: Trên đây là bài viết hướng dẫn bạn tạo menu ngang 2 cấp khá đơn giản và dễ hiểu. Chúc bạn học HTML và CSS hiệu quả và đừng quên ghé thăm blog của mình để theo dõi thường xuyên nhiều bài khác để cập nhật thêm nhiều kiến thức bổ ích.
Category: