Sau đây là hướng dẫn tạo menu dropdown ( Menu đỗ xuống) bằng css đơn giản.
Bước 1: Tạo một file html tạm đặt tên là menu.html với nội dung sau:
Lưu lại và chạy thử bạn sẻ thấy kết quả. Lưu ý bạn có thể chỉnh lại style của menu theo ý mình bằng cách chỉnh file main.css.
Chúc bạn thành công!
Bước 1: Tạo một file html tạm đặt tên là menu.html với nội dung sau:
Bước 2 tạo một file css đặt tên là main.css chứa nội dung sau:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <ul id="menu"> <li> <a href="#">Menu 1</a> </li> <li><a href="#">Menu 2</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> <li><a href="#">Menu 3</a> </li> <li><a href="#">Menu 4</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> <li> <a href="#">Menu 5</a> </li> </ul> </body> </html>
Sau khi đó lưu lại và chèn vào trước thẻ </head> của file menu.html đoạn code sau:ul#menu, ul#menu ul.sub-menu { padding:0; margin: 0; } ul#menu li, ul#menu ul.sub-menu li { list-style-type: none; display: inline-block; } /*Link Appearance*/ ul#menu li a, ul#menu li ul.sub-menu li a { text-decoration: none; color: #fff; background: #666; padding: 5px; display:inline-block; } /*Make the parent of sub-menu relative*/ ul#menu li { position: relative; } /*sub menu*/ ul#menu li ul.sub-menu { display:none; position: absolute; top: 30px; left: 0; width: 100px; } ul#menu li:hover ul.sub-menu { display:block; }
<link rel="stylesheet" href="styles/red_v04_home/css/main.css" />
Lưu lại và chạy thử bạn sẻ thấy kết quả. Lưu ý bạn có thể chỉnh lại style của menu theo ý mình bằng cách chỉnh file main.css.
Chúc bạn thành công!
