Tạo Menu jQuery Horizontal trỏ xuống ngang cho Web, blog

Làm thế nào để thêm menu trỏ xuống ngang cho Website, blog? Mình muốn tạo menu ngang trên blogspot của mình thì làm thế nào?
Code sử dụng cho dạng menu đó thì CSS cũng làm được nhưng có vẻ không đẹp bằng JQuery. Ở bài viết này mình giới thiệu tới các bạn code đó và hướng dẫn thủ thuật trên blogspot. Đối với Website thì các bạn chèn theo hình thức code JS và HTML tương tự

Code này mình chia làm 2 phần. Phần code Jquery + CSS và Code HTML.
Code  Jquery + CSS:

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>

Tiếp theo là code HTML:

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

Hướng dẫn thêm vào Blogger:
1. Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Dán code Jquery + CSS trước thẻ đóng </head> và lưu mẫu.
3. Vào bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/Javascript (tiện ích này thêm ở bên trên tiện ích POST nhé)
4. Dán code HTML vào tiện ích đó và lưu lại.

Chuyên mục: html-css, javascript, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger