như tiêu đề thì các bạn chỉ cần HTML và CSS thì cũng có thể tạo nên 1 menu dạng drop không kém. đầu tiên là code HTML: HTML: <!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" xml:lang="en" lang="en"> <head> <title>Drop down</title> </head> <body> <div id="menu_drop_down"> <ul> <li><a href="#" >Trang chu</a></li> <li><a href="#" >Hoc Tap</a> <ul> <li><a href="#">Toan</a></li> <li><a href="#">Li</a></li> <li><a href="#">Hoa</a></li> <li><a href="#">Van</a></li> </ul> </li> <li><a href="#">Dang ki</a> <ul> <li><a href="#">mien nam</a></li> <li><a href="#">mien bac</a></li> <li><a href="#">mien trung</a></li> <li><a href="#">nuoc ngoai</a></li> </ul> </li> <li><a href="#" >profile</a> <ul> <li><a href="#">hinh thien nhien</a></li> <li><a href="#">hinh con vat</a></li> <li><a href="#">hinh nguoi</a></li> <li><a href="#">hinh ve</a></li> </ul> </li> <li><a href="#" >Faqs</a></li> </ul> </div> </body> </html> sau khi có được khung cho menu mình thì bạn tiến hành style cho menu mình : Mã: <style type="text/css"> /* reset css */ @media screen { * { margin: 0; padding: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } ul, ol {list-style: none;} strong {font-weight: bold;} article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .group { display: inline-block; clear: both; } body { font: 12px/2 "Helvetica Neue",Helvetica,Arial,sans-serif;} h1, h2, h3, h4, h5 {} a img { border: 0; } a {color: #ce9702; text-decoration: none;} .zoomer:active { top: 0; } /*end reset css */ #menu_drop_down {display: inline-block; clear: both; border:1px dashed #bcd;position:relative;padding:5px;} #menu_drop_down li {border:1px solid white;float:left;display:block;background-color:#bcd;} #menu_drop_down li a {float:left;display:block;width:200px;text-align:center;padding:10px;color:white;} #menu_drop_down li:hover{ background-color:#8386cc; } #menu_drop_down li ul {position:absolute;display:none;top:50px;} #menu_drop_down li:hover ul{display:block;} #menu_drop_down li ul li {clear:both;} #menu_drop_down li ul li a{height:20px;border:1px dotted white;height:5px;padding-bottom:20px;} </style> Nếu thấy đơn giản thì like nhé. @@ (y)
