Tạo menu sổ xuống giống VNExpress.

Ngồi mò cả buổi mới có được một cái menu như hình bên dưới tuy không đẹp và bắt mắt lắm nhưng hy vọng nó cũng giải quyết được phần nào ý muốn của các bạn thích trang trí cho blog của mình thêm sinh động và màu mè tí.

Đầ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: 75px  auto;
}

ul#topnav{
float: left;
width: 753px;
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: 753px;
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="#">Home</a>
    <ul class="children">
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">News</a></li>
    </ul>
   </li>
   <li><a href="#">Thủ Thuật</a>
    <ul class="children">
     <li><a href="#">BLog</a></li>
     <li><a href="#">Internet</a></li>
     <li><a href="#">Máy Tính</a></li>
     <li><a href="#">Sử dụng phần mềm</a></li>
    </ul>
   </li> 
   <li><a href="#">Giáo trình</a>
    <ul class="children">
     <li><a href="#">Điện</a></li>
     <li><a href="#">Điện tử</a></li>
     <li><a href="#">Đồ họa</a></li>
     <li><a href="#">Máy tính</a></li>
     <li><a href="#">Office</a></li>
     <li><a href="#">Vi xử lý</a></li>
    </ul>
   </li>   
   <li><a href="#">Phần mềm</a>
    <ul class="children">
     <li><a href="#">Điện</a></li>
     <li><a href="#">Điện tử</a></li>
     <li><a href="#">Đồ họa</a></li>
     <li><a href="#">Office</a></li>
    </ul>
   </li> 
   <li><a href="#">Giải trí</a>
    <ul class="children">
     <li><a href="#">Nghe nhạc</a></li>
     <li><a href="#">Tân cổ</a></li>
     <li><a href="#">Xem hài</a></li>
     <li><a href="#">Xem phim</a></li>
     <li><a href="#">Hình thiên nhiên</a></li>
     <li><a href="#">Hình người đẹp</a></li>
    </ul>
   </li> 
  </ul>
</div><!-- end wrapper --> 

Trong đoạn code trên các bạn thay thế '#' bằng link tương ứng (cũng là link có chứa nhãn).
Và các giá trị như width, height, color, background...các bạn cũng nên thay đổi cho phù hợp với sở thích của bạn.
Bảng mã màu mời bạn vào địa chỉ này để lấy : Bảng mã màu
Chúc các bạn thành công.

Được đăng tại nhãn: Thủ thuật blog