Tạo Dropdown-menu giống của vnexpress

Chào các bạn hôm nay mình mới mò mẫm cả buổi mới học được 1 cách tạo menu Drop down-menu giống của vnexpress.net.

Nói giống hoàn toàn thì không giống đâu mình đặt cái tiêu đề cho nó hoành tráng đó mà. Bạn nào xem xong đừng có thất vọng nha. Nhưng trên thực tế thì menu này cũng hoạt động gần giống như vậy, nghĩa là ... Mà thôi đi vào vấn đề chính luôn đỡ lòng vòng với lại có lẽ chẳng ai đọc cả.

LIVE DEMO

Đầu tiên các bạn login vào blogger.

Sau đó thì tiếp đến vào Thiết kế --> Phần Tử Trang ---> Tạo 1 tiện ích HTML/JavaScript và chèn đoạn code bên dưới vào.

<style type="text/css">

* {margin: 0; padding: 0}

body{
font-size: 63%;
}
ul{
list-style:none;
}
#wrapper {
width: 700px;
margin: 20px  auto;
}

ul#topnav{
float: left;
width: 581px;
position: relative;
font-size: 1.4em;
height: 40px;
background: #e99765 url(http://1.bp.blogspot.com/-ICPsuMBBwNo/TwFbHKAUjqI/AAAAAAAAA5A/0ZPfCb9yhy0/s1600/xanh.png) repeat-x;
}

ul#topnav li {
float: left;
height: 40px;
padding: 0px;
border-right: 1px solid #2f6184;
}

ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}

ul#topnav  li:hover {
background:  #b21a1a url(http://1.bp.blogspot.com/-bXP2E0L2ebw/TwFbGTewVPI/AAAAAAAAA48/Hck6LtE7i8I/s1600/cam.png) repeat-x;
}

ul#topnav li ul.children {
float: left;
height: 40px;
line-height: 40px;
padding: 0px;
position: absolute;
left: 0px;
top: 40px;
display: none;
width: 650px;
background: #ff7d21;
color: white;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0xp 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
}

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;
}
</style>

<div id="wrapper">
  <ul id="topnav">
   <li><a href="#">Trang Chủ</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Thủ Thuật</a>
    <ul class="children">
     <li><a href="#">BLog</a></li>
     <li><a href="#">Máy Tính</a></li>
    </ul>
   </li> 
   <li><a href="#">Học Tập</a>
    <ul class="children">
     <li><a href="#">HTML</a></li>
     <li><a href="#">CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">ASP.net</a></li>
     <li><a href="#">PHP</a></li>
    </ul>
   </li>   
   <li><a href="#">Giải Trí</a>
    <ul class="children">
     <li><a href="#">Xem Phim</a></li>
     <li><a href="#">Nghe Nhạc</a></li>
     <li><a href="#">Đọc Truyện</a></li>
    </ul>
   </li> 
   <li><a href="#">Diễn Đàn</a></li>
   <li><a href="#">Contact Us</a></li>
  </ul>
</div><!-- end wrapper --> 

Các bạn hãy thay đổi lại
Link
Tiêu đề link
Các giá trị như width, height, color, background...
Và các bạn nên thay đổi sao cho phù hợp với blog của các bạn là được


Trong quá trình làm khó có thể tránh khỏi sai xót đâu đó trong code trên vì thế nếu ai phát hiện được thì hãy comments bên dưới để mình sửa nha, mặc dù mình đã test và chạy ngon .

Nếu có ai thắc mắc gì vui lòng comments bên dưới mình sẽ giải đáp cho bạn trong vòng 24h.
Chúc các bạn thành công

Tags: blogspot, css, thuthuat