Làm thế nào để thêm được menu ngang cho Website, blog. Thủ thuật hôm nay mình giới thiệu tới các bạn là làm 1 menu ngang Menu CSS3 Navigation đơn giản mà đẹp và cần thiết cho blog, website có nhiều mục con.

/* The CSS3 Code for the menu starts here itviet360.com */
#btrixsimplemenu{
clear:both;
margin:5px auto;
border:0px solid #000;
font-size:12px;
font-family: verdana;
height: 236px;
}

ul#li{color:black;}
ul#level-one{
width:700px;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUbxrO3QKYIqaFdLjO55Q6VrzSQpAffPn9fCyWqdVPHqe3RLCqY9CNiOTAF4ZiqmWx_aySSPymXpkR_a4DZv39C-FZvjhCugCFhnW5EUkCTok_wSKIvHRxsQ3MxB4VpAexNWUcZaOLx7o/s1600/btrix_menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0); /* for firefox 3.6+ */
border:solid 1px #4d4d4d;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li{
width:80px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
border:solid 0px #000000;-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover{
background:#FFA500;
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-two,ul#level-three,ul#level-four{
list-style: none;
background:#FFA500 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2bSZBNY_wjEc3WMFtNcoOsBsp1buZQUO_bnVZ46HSbGcSYHwVfTxYk1AQifrI1OOhLl1xyktIlHNvPAdwienmtvk1fDurZBRskiIftXmjeQmGGw1gGF5MRbg-NhA_h2RAuh2lAVhuLs/s1600/btrix_menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:240px;
border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkTrGLJPyyYSI1gIRTaTlRJQgLto7extMCeeHJ6lnOqMTQwgCJKg1bv-XD3rA8IhNhhRWbSA2-Ts5-AIsjkGgJfjNzuWDYR75qZp6CiPtJKs_JQ6W37bl5R2URPBf4tAGAOrwAIcFnFWc/s1600/btrix_menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #c0c0c0); /* for firefox 3.6+ */
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}
ul#level-three li:hover{
background: #00BFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh1Ctq4QOFomQskZwF6dhQP1gEJaWuYI_Qy_Lj7ZkkcJV8OZuDLjGtHGGRfJq2O2-zHZH9PpKgQtDS282J0TzYdZjgvy6WzqkxsDVKDRAMoc7RgIwHQl-FHFjAx83sV2gFxGeocgHIA9s/s1600/btrix_menu-li-blue.png) repeat-x bottom left;
background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}

Lưu mẫu (Save Template) lại.
3. Vào Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript (Tiện ích này nên thêm ở trên tiệc ích POST)
4. Dán code dưới đây vào tiện ích vừa thêm:

• Home


• Campaign
  
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  
  


• Download
  
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  
  


• List
  
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  • sub-Second
  
  
  
  


• About


• Demo


• Contact

Lưu lại và xem kết quả nhé. :)