Tạo menu đa cấp dùng CSS3 cho Blogger và Wordpress

Menu là một phần không thể thiếu đối với trang web,Blog cũng không ngoại lệ,Blogger không trang bị hệ thống menu cho Blog ,việc trang bị menu ưng ý cho Blog cũng không phải việc đơn giản,Bachkhoamedia xin giới thiệu với các bạn một dạng menu,Đây mà menu đa cấp sử dụng CSS3 và hiệu ứng ảnh,các bạn  có thể tham khảo cách làm dưới đây :






Bước 1 :Đăng nhập vào Blogger>Thiết kế>Phần tử trang
Bước 2:"Ấn vào "Add a Gadget"hay "thêm tiện ích" 
Bước 3: Chọn HTML/Javascript widget
Bước 4 :Dán đoạn code bên dưới vào:

<style>
#MBT-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRTfmZEDr3xQK1Ur49oYen1CGHxxkBCN9Qp0UH7TlzQOd0I0aUi4vmatlRp-E_H5n1DNV1-bo_-juM0E2AF_7D6zB6EKGWoX4t90lbdFh4BcXzU01sriyCIoS5Zmfj_AshAVszQyC1Tw/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRTfmZEDr3xQK1Ur49oYen1CGHxxkBCN9Qp0UH7TlzQOd0I0aUi4vmatlRp-E_H5n1DNV1-bo_-juM0E2AF_7D6zB6EKGWoX4t90lbdFh4BcXzU01sriyCIoS5Zmfj_AshAVszQyC1Tw/s1600/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRTfmZEDr3xQK1Ur49oYen1CGHxxkBCN9Qp0UH7TlzQOd0I0aUi4vmatlRp-E_H5n1DNV1-bo_-juM0E2AF_7D6zB6EKGWoX4t90lbdFh4BcXzU01sriyCIoS5Zmfj_AshAVszQyC1Tw/s1600/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRTfmZEDr3xQK1Ur49oYen1CGHxxkBCN9Qp0UH7TlzQOd0I0aUi4vmatlRp-E_H5n1DNV1-bo_-juM0E2AF_7D6zB6EKGWoX4t90lbdFh4BcXzU01sriyCIoS5Zmfj_AshAVszQyC1Tw/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="http://bachkhoamedia.blogspot.com/">Home</a></li>
<li><a href="#">Blogger Tricks</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>

<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>

<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item 1</a></li>
<li><a href="#">Sub-Level Item 1</a>
<ul>
<li><a href="#">Sub-Level Item 11</a></li>
<li><a href="#">Sub-Level Item 22</a></li>
<li><a href="#">Sub-Level Item 33</a></li>
</ul>
</li>

<li><a href="#">Sub-Level Item 1</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Create This »</a></li>

</ul></div>
<br/>

Tùy Biến
Để tùy biến link theo ý bạn rất dễ bởi bạn chỉ việc thay thế

<li><a href="#">TAB TEXT</a></li>

thành đường link theo ý muốn của bạn là được,
Cấu trúc menu chủ đề và sub menu sắp xếp như sau:

<li>Menu chính<li><ul><li>Menu xổ xuống</li></ul>

việc chỉnh sửa thêm bớt menu rất dễ nên mình không nói kĩ nữa,ai không làm được có thể comment dưới đây,mình sẽ giải thích kĩ hơn
Việc thay đổi màu của menu cũng rất dễ,bạn để ý thấy dòng
background: #0080ff ,bạn chỉ việc thay thành mã màu bạn muốn là đươc

Cuối cùng,save lại,và ra chiêm ngưỡng thành quả của mình nào !
Chúc bạn thành công!