Admin_vanthuc Admin
Tổng số bài gửi : 61 Danh Tiếng : 0 Join date : 03/05/2011 Age : 31 Đến từ : Sơn Linh-Sơn Hà-Quảng Ngãi
| Tiêu đề: Xây dựng dropdown menu với html và css Wed Jun 15, 2011 9:08 am | |
| Bài này mình giới thiệu với các bạn một kiểu Dropdown Menu đang được dùng ở nhiều website khác như dantri, vnexpress, ... Bạn hãy copy đoạn code dưới dây và Save thành file.html để chạy thử nhé. Bạn cũng có thể thay đổi các thuộc tính nếu cần để hiển thị theo ý muốn. - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Thế giới của người việt</title> <style> *{margin: 0; padding: 0} body { font-size: 62.5%;} ul { list-style: none;} #wrapper { width: 700px;margin: 10px auto; } ul#topnav { float: left; width: 580px; position: relative; font-size: 1.4em; height: 28px; background: #e99765 url(http://hmweb.com.vn/hmweb_menu/images/MenuTop_bg.jpg) repeat-x; behavior: url(whateverhover.htc); } ul#topnav li { float: left;height: 28px; padding: 0px; border-right: 1px solid #2f6184; }
ul#topnav li a { padding: 5px 15px; display: block; color: #f0f0f0; text-decoration: none; }
ul#topnav li:hover { background: #b21a1a url(http://hmweb.com.vn/hmweb_menu/images/bottom-nav.jpg) repeat-x; }
ul#topnav li ul.children { float: left; height: 28px; line-height: 28px; padding: 0px; position: absolute; left: 0px; top: 28px;display: none; width: 580px; background: #cc2928; color: white; -moz-border-radius: 0px 0px 1px 1px; -khtml-border-radius: 0px 0px 1px 1px; -webkit-border-radius: 0px 0px 1px 1px; }
ul#topnav li ul.children li { border: none; } ul#topnav li:hover ul { display: block; } ul#topnav li ul a { display: inline;} ul#topnav li ul a:hover {text-decoration: underline;} ul#topnav li ul li:hover { background: none;} </style> </head> <body> <div id="wrapper"> <ul id="topnav"> <li><a href="http://webviêtpro.vn">Trang chủ?</a></li> <li><a href="http://webviêtpro.vn">Tin tức</a></li> <li><a href="http://webviêtpro.vn">Công nghệ thông tin</a> <ul class="children"> <li><a href="http://webviêtpro.vn">Lập trình</a></li> <li><a href="http://webviêtpro.vn">Co sở dữ liệu</a></li> <li><a href="http://webviêtpro.vn">Văn phòng</a></li> <li><a href="http://webviêtpro.vn">Thủ thuật</a></li> <li><a href="http://webviêtpro.vn">Thế giơi website</a></li> </ul> </li> <li><a href="http://webviêtpro.vn">H?c t?p</a> <ul class="children"> <li><a href="http://webviêtpro.vn">Toán học</a></li> <li><a href="http://webviêtpro.vn">Luyện thi</a></li> </ul> </li> <li><a href="http://webviêtpro.vn">Danh bạ website</a></li> <li><a href="http://webviêtpro.vn">Giải trí</a> <ul class="children"> <li><a href="http://webviêtpro.vn">Chuyện ngắn</a></li> <li><a href="http://webviêtpro.vn">Chuyện cười</a></li> <li><a href="http://webviêtpro.vn">Ðọc và suy ngẫm</a></li> </ul> </li> </ul> </div><!--end #wrapper--> </body> </html>
|
|