02/10/2018, 20:45
Xây dựng Dropdown Menu với html và Css
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 có thể xem demo tại đây Hoặc down mã nguồn Tại đây 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 ...
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 có thể xem demo tại đây Hoặc down mã nguồn Tại đây
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 có thể xem demo tại đây Hoặc down mã nguồn Tại đây
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.
<!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>hmweb-Chia se la niem vui</title> <style> *{margin: 0; padding: 0} body { font-size: 62.5%;} ul { list-style: none;} #wrapper { awidth: 700px;margin: 10px auto; } ul#topnav { float: left; awidth: 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; awidth: 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://hmweb.com.vn">Trang chủ?</a></li> <li><a href="http://hmweb.com.vn">Tin tức</a></li> <li><a href="http://hmweb.com.vn">Công nghệ thông tin</a> <ul class="children"> <li><a href="http://hmweb.com.vn">Lập trình</a></li> <li><a href="http://hmweb.com.vn">Co sở dữ liệu</a></li> <li><a href="http://hmweb.com.vn">Văn phòng</a></li> <li><a href="http://hmweb.com.vn">Thủ thuật</a></li> <li><a href="http://hmweb.com.vn">Thế giơi website</a></li> </ul> </li> <li><a href="http://hmweb.com.vn">H?c t?p</a> <ul class="children"> <li><a href="http://hmweb.com.vn">Toán học</a></li> <li><a href="http://hmweb.com.vn">Luyện thi</a></li> </ul> </li> <li><a href="http://hmweb.com.vn">Danh bạ website</a></li> <li><a href="http://hmweb.com.vn">Giải trí</a> <ul class="children"> <li><a href="http://hmweb.com.vn">Chuyện ngắn</a></li> <li><a href="http://hmweb.com.vn">Chuyện cười</a></li> <li><a href="http://hmweb.com.vn">Ðọc và suy ngẫm</a></li> </ul> </li> </ul> </div> </body> </html>
(Ở đoạn code này mình để dường dẫn tuyệt đối, bạn hãy thay đổi cho phù hợp nhé)
Chúc bạn thành công
Nguồn: http://www.thietkewebsmart.com/html-css/xay-dung-dropdown-menu-voi-html-va-css/874.htm
Bình luận