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.
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
05 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
06 |
<title>hmweb-Chia se la niem vui</title> |
08 |
*{margin: 0; padding: 0} |
09 |
body { font-size: 62.5%;} |
10 |
ul { list-style: none;} |
11 |
#wrapper { width: 700px;margin: 10px auto; } |
12 |
ul#topnav { float: left; width: 580px; |
13 |
position: relative; font-size: 1.4em; |
16 |
behavior: url(whateverhover.htc); |
19 |
float: left;height: 28px; padding: 0px; |
20 |
border-right: 1px solid #2f6184; |
24 |
padding: 5px 15px; display: block; color: #f0f0f0; |
25 |
text-decoration: none; |
32 |
ul#topnav li ul.children { |
33 |
float: left; height: 28px; line-height: 28px; |
34 |
padding: 0px; position: absolute; |
35 |
left: 0px; top: 28px;display: none; |
36 |
width: 580px; background: #cc2928; |
38 |
-moz-border-radius: 0px 0px 1px 1px; |
39 |
-khtml-border-radius: 0px 0px 1px 1px; |
40 |
-webkit-border-radius: 0px 0px 1px 1px; |
43 |
ul#topnav li ul.children li { border: none; } |
44 |
ul#topnav li:hover ul { display: block; } |
45 |
ul#topnav li ul a { display: inline;} |
46 |
ul#topnav li ul a:hover {text-decoration: underline;} |
47 |
ul#topnav li ul li:hover { background: none;} |
79 |
</div><!--end #wrapper--> |
(Ở đ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