Menu xổ dọc nhiều cấp sử dụng CSS3 - http://namkna.blogspot.com/
Nếu trước đây các bạn phải than phiền về tốc độ blog bị giảm đi ít nhiều khi áp dụng các thanh menu xổ dọc nhiều cấp kết hợp JQuery. Thì hôm nay mẫu menu namkna giới thiệu này sẽ đem đến cho các bạn một trải nghiệm tuyệt vời với CSS3.

Bạn có thể xem Demo để xem sự vượt trội của CSS 3 nhé.

Menu xổ dọc nhiều cấp sử dụng CSS3 - http://namkna.blogspot.com/

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) (Không cần mở rộng tiện ích mẫu) - Tiếp tục => Xem video:
4- Thêm đoạn code sau vào trước thẻ   ]]></b:skin> .
#MBT-Container {
    font: normal 1em Arial, Helvetica, sans-serif;
     width:100%; float:left;   
}
a {
    color: #333;
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOp-DgBMhdF8MmnK6oZCUAW9IbBPgdRab08Rh7KDWHXrQeTMbfdkIynotWLMGqa9x-aw7NnjIAceRGvs2F0mxTjC7wvrcCqyiLXvevLdNwwgJEYzzyI7f-sV1H8CSJX1lXSBEFeWnlj_ho/h120/gradient-namkna-blogspot-com.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/AVvXsEjOp-DgBMhdF8MmnK6oZCUAW9IbBPgdRab08Rh7KDWHXrQeTMbfdkIynotWLMGqa9x-aw7NnjIAceRGvs2F0mxTjC7wvrcCqyiLXvevLdNwwgJEYzzyI7f-sV1H8CSJX1lXSBEFeWnlj_ho/h120/gradient-namkna-blogspot-com.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: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOp-DgBMhdF8MmnK6oZCUAW9IbBPgdRab08Rh7KDWHXrQeTMbfdkIynotWLMGqa9x-aw7NnjIAceRGvs2F0mxTjC7wvrcCqyiLXvevLdNwwgJEYzzyI7f-sV1H8CSJX1lXSBEFeWnlj_ho/h120/gradient-namkna-blogspot-com.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/AVvXsEjOp-DgBMhdF8MmnK6oZCUAW9IbBPgdRab08Rh7KDWHXrQeTMbfdkIynotWLMGqa9x-aw7NnjIAceRGvs2F0mxTjC7wvrcCqyiLXvevLdNwwgJEYzzyI7f-sV1H8CSJX1lXSBEFeWnlj_ho/h120/gradient-namkna-blogspot-com.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;
}
- Sau đó bấm Lưu Mẫu lại.
- nếu muốn đổi màu khác bạn hãy đổi phần  #7d7d7d  thành mã màu của bạn như màu xanh (#0080ff). Xem mã màu tại đây
5- Toại một tiện ích HTML/Javarscip => Xem video:
- Thêm đoạn code sau vào.
<div id="MBT-Container">
<ul id="nav">
 <li class="current"><a href="/">Home</a></li>
 <li><a href="http://namkna.blogspot.com/">Menu-Level Item 1</a>

  <ul>
   <li><a href="#">Sub-Level Item 1.1</a>
    <ul>
     <li><a href="#">Sub-Level Item 1.1.1</a></li>
     <li><a href="#">Sub-Level Item 1.1.2</a></li>
     <li><a href="#">Sub-Level Item 1.1.3</a></li>
     <li><a href="#">Sub-Level Item 1.1.4</a></li>

    </ul>
   </li>
   <li><a href="#">Sub-Level Item 1.2</a>
    <ul>
     <li><a href="#">Sub-Level Item 1.2.1</a></li>
     <li><a href="#">Sub-Level Item 1.2.2</a></li>
     <li><a href="#">Sub-Level Item 1.2.3</a></li>
    </ul>
   </li>
   <li><a href="#">Sub-Level Item 1.3</a></li>

   <li><a href="#">Sub-Level Item 1.4</a></li>
  </ul>
 </li>
 <li><a href="#">Menu-Level Item 2</a>
  <ul>
   <li><a href="#">Sub-Level Item 2.1</a>
    <ul>

     <li><a href="#">Sub-Level Item 2.1.1</a></li>
     <li><a href="#">Sub-Level Item 2.1.2</a>
      <ul>
       <li><a href="#">Sub-Level Item 2.1.2.1</a></li>
       <li><a href="#">Sub-Level Item 2.1.2.2</a></li>
       <li><a href="#">Sub-Level Item 2.1.2.3</a></li>
       <li><a href="#">Sub-Level Item 2.1.2.4</a></li>

      </ul>
     </li>
     
     <li><a href="#">Sub-Level Item 2.1.3</a></li>
    </ul>
   </li>
   <li><a href="#">Sub-Level Item 2.2</a></li>
   <li><a href="#">Sub-Level Item 2.3</a></li>

   <li><a href="#">Sub-Level Item 2.4</a>
    <ul>
     <li><a href="#">Sub-Level Item 2.4.1</a></li>
     <li><a href="#">Sub-Level Item 2.4.2</a></li>
     <li><a href="#">Sub-Level Item 2.4.3</a></li>
     <li><a href="#">Sub-Level Item 2.4.4</a></li>
    </ul>
   </li>

  </ul>
 </li> 
 <li><a href="#">Menu-Level Item 3</a></li>
 <li><a href="#">Menu-Level Item 4</a></li>
</ul>
</div>
- Trong code trên bạn thay đổi các thông số sau cho phù hợp. Dấu # thay bằng liên kết tới các nhãn hoặc bài viết.
- Sau đó bấm Lưu lại

Menu trên có style được định dạng bằng HTML và CSS3. Menu có sử dụng các thuộc tính border-radius để bo tròn góc, thuộc tính box-shadow tạo bóng đổ cho menu con và text-shadow để tạo bóng đổ cho chữ. Menu này hoạt động tốt trên các trình duyệt có hỗ trợ CSS3 như Firefox, Safari, Chrome, IE 9+. Trên các trình duyệt không hỗ trợ CSS3 như IE6, IE7, IE8 thì tính năng Dropdown vẫn hoạt động tốt ngoại trừ những hiệu ứng của CSS3 (border-radius, box-shadow, text-shadow)
- Nếu có host chứa file riêng thì bạn có thể copy tất cả code ở bước 4 vào thành 1 file.CSS sau đó upload lên host. Lấy link file đó và chèn vào trước thẻ </head> theo cấu chúc:
<link href="URL_style.css" rel="stylesheet" type="text/css" />
URL_style.css chính là link CSS.
Chúc thành công!