Menu ngang xổ xuống đẹp cho blogspot

Đây là mẫu Menu ngang xổ dọc cho blogspot sử dụng css nên tốc độ load rất nhanh, không ảnh hưởng tới template.

- Cách thực hiện như sau:
- Trước tiên bạn chèn đoạn CSS sau trên ]]></b:skin>

#menuthaiaiti {width: 100%;margin: 0 auto;padding: 9px 0 0 0;}.home-icon1 {float: left;overflow: hidden;margin-top:7px;}#menuwrapperpic1{background:#169DC5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwbjH2rIa37K1ig8pdWR7KKYmkoRMJ_ZQerEC-MsZRXFEnGQ6mh8RSlnyk7q1w9eXRq4T28N1dOiZOGneDg7wWnTc5miIbHXX-3xzlJ_D0V0vWCmcL0PTdOBkyxvv1oYr00Msym0I-zdYO/h120/newhearder1+copy.JPG) repeat-x;width:100%;margin:0 auto;height:36px;overflow: hidden;}#menuwrapper1{width:940px;height:36px;margin:0 auto;overflow: hidden;}.trigger{background-image:url(#);background-repeat:no-repeat;background-position:right center;padding:11px 24px 11px 12px}#menubar1{width:100%;}#menubar1 ul {width: 304px;float: left;overflow: hidden;}#menubar1 ul li {float: left;width: 151px;overflow: hidden;border-right: 1px solid #e1651a;border-bottom: 1px solid #e1651a;border-radius: 0 !important;}#menubar1,#menubar1 ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#menubar1 a{display:block;text-decoration:none;font:bold 13px arial;text-transform:none;color:#fff;padding:12px 12px 10px}#menubar1 li{float:left;position:static;margin-top: -2px;width:auto;background-image: url(#);background-position: right 11px;background-repeat: no-repeat;}#menubar1 ul li a{text-align:left;color:#fff !important;font:bold 12px !important;float: left;width: 100%;height: 17px;}#menubar1 li ul{float:left;z-index:100;position:absolute;display:none;background:#f37021;}#menubar1 li:hover a,#menubar1 a:active,#menubar1 a:focus,#menubar1 li.hvr a{color:#fff !important;}#menubar1 li:hover ul,#menubar1 li.hvr ul{display:block;z-index: 99991;border-radius: 0 0 8px 8px;}#menubar1 li:hover ul a,#menubar1 li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#menubar1 ul a:hover{background-color:#9b3124!important;color:#fff!important;text-decoration:none}#fdmega-menu {background: url(http://hotrovon24h.com/templates/w1-08b/images/bg_main_menu.png) repeat-x;width: 100%;margin: 0 auto;}#fdmega-menu ul {list-style: none;}#search{box-shadow:0 0 7px #ddd inset;-moz-border-radius:3px;border-radius:3px;float:right;border:1px solid #ccc;margin:0 0 0 0;background:#fff;width:210px}#search input.text{background:transparent;-moz-border-radius:3px;border-radius:3px;float:left;border:0;padding:4px 30px 4px 5px;width:140px;height:16px;line-height:16x;font-size:13px;color:#666}#search input.submit{float:right;text-indent:-999em;margin:0;border:0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnh5nxj2ajv2HNrITRKwBDwz2etv4CrbgpRBmpm-WpkqMehzB7NGr01GgWaCmCq6-xinI2D3k3EKtEMMfeUMX_-hB6W1-52mUnH4CLduRbEIA8WgVwyr57GCWeGRXD7QffmqhoYptosUQ/s37/search.gif) no-repeat 0 0;width:19px;height:21px}#search .submit:hover{background-position:-20px 0}.tatcadanhmuc {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8xOZI4GyO6SKEPFwoUxLCHocF9dOXwouxKS7RRCZsEvoA7ZaCjeUWsrVFSHYsbEdbrM85nrVgTNG-2hJHNv5bjE3ao96luUn8jv6IZgBNCRUywtjsDe2rxsNv02MFHsbgUuIGW1DCz75n/h120/muitenvang.png) no-repeat;text-transform: uppercase;background-position: 145px;float: left;width: 135px;}ul#topnav {width: 960px;position: relative;height: 36px;margin: 0 auto;}ul#topnav li {float: left;height: 36px;padding: 0px;background: url(#) no-repeat top right;}ul#topnav li a {padding: 10px 15px;display: block;color: #fff;font: bold 13px arial;text-decoration: none;}#topnav li img {float: left;margin-top: -4px;margin-right: 0px;}ul#topnav li a:hover {color:#ffe447}.itemkhoagiaodien {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUheAjK-Om2lv3Zv4QmrUqnvYd7qXVQO0RZD0qTtTLUStAzNAw5qSwIXzoJ0JquYd3-jaCpLB02l0KnLTq-bDbTGNN5Ckm66q4s-7ZxzE0yxtaVhqCNscYfjIv0PLUgHT7QgI3TUBi4OLN/h120/saleoff.png) no-repeat;margin-left: -10px;position: absolute;width: 53px;height: 43px;margin-top: -26px;}ul#topnav li:hover {background:url(#) repeat-x top left;}ul#topnav li.mg-home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqT60BIxwmFfAcTe01UrlT0vji82lt16oI9Nq1E17vH2aZYPTR3kELDaWTwmrS6wbdL62Bc8-accWDlLjk8p1Oc9ZOp-_0q0drijtCogJDO-rrtOE5VbGsjhNVrR7F_RMIQ_RRHba-mV8/s0/home-icon.png) no-repeat !important;float: left;margin-top: 8px;overflow: hidden;width: 20px;height: 25px;background-size: 100% !important;margin-left: 15px;margin-right: 10px;}ul#topnav li.mg-home a {height:19px;}ul#topnav li div.sub {position: absolute;z-index: 9999;margin-left: -7px !important;overflow: hidden;top: 36px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFLL9nmQM5y2Z6xHBD6jpxYiVy5DU7odzgc0KIAPq91VWEgKzsmxTs-A6N4mVpSThTvPslJJd2A31eRHKWQpvYF6FjhCVdF3ZrHwS1r02xubF-cpMROAJf4_rzBV1rqlS7j96WQLExsL0/s0/bgthaiaiti.jpg) no-repeat;background-position: right bottom;padding:5px;display: none;border-right:4px solid #0082ff;border-left:4px solid #0082ff;border-bottom:4px solid #0082ff;color:#333;}ul#topnav li:hover div.sub {display: block;}ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}ul#topnav li div.sub div.cont {float: left;padding:5px;}ul#topnav li div.sub div.cont h3 {padding-bottom: 5px;}ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#666;font: 12px arial;}ul#topnav li div.sub div.cont a:hover{color:#039;text-decoration: underline;}ul#topnav li div.ms1 {}ul#topnav li div.ms2 {width:942px;left: 7px;}ul#topnav li div.ms3 {width:260px;left: 195px;}ul#topnav li div.ms4 {}ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}ul#topnav li div.sub div.cs21 {width:178px;}ul#topnav li div.sub div.cs31 {width:120px;}#menuleft_home {background:#fff;}#menuleft_home h1 {background:#102e50 url(../images/leftmenu_top.png) no-repeat;font-size:13px;text-transform:uppercase;text-align:center;color:#FFF;padding:10px 5px;}#menuleft_home h2 {background:url url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASOQqPxMEsFBY_lkbzPIO5OmGdnAJB4oH6cC23u77H74pxxEqj37fBANTezjHBR7d3wQehFL5V5E6NcF-nPdY3WMsUqutLJr3G0ivhFEu1GWo9p1LHHNnGyheC96orh7bel85qRUc0w/h120/item_menuleft.png) 5px 7px no-repeat;font-size:12px;text-transform:uppercase;color:fff;padding:7px 5px 7px 25px;font-weight:bold;}#menuleft_home li {padding:7px;padding-left:15px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIDyTr3f-NMD9FDfuot793vyZGQBpnDHLRdl81nJlZUJaC28D3WntjB4npcJkO-_uZtYxBjQGw6zsDsN6RUbbdn3yMEeUfLWnYqjy6QtA6i2Qy-ouTkJ9AdQtUGrOKUCWJUjKqde4noQY/s0-w80/icon_catalogies.gif) no-repeat 2px;border-top: 1px solid #686868;}#menuleft_home li a {color: #007217;font-weight: 700;}

- Chèn đoạn HTML sau vào nơi bạn cần hiển thị:

<div id='menuthaiaiti'><div id='fdmega-menu'><ul id='topnav'><li><a class='tatcadanhmuc' href='#'>Tất cả danh mục</a><div class='sub ms2'><div class='cont cs21'><h3>Blogspot</h3><a href='#'>Template blogspot Pro</a><a href='#'>Template blogspot free</a><a href='#'>Thủ thuật blogspot</a></div><div class='cont cs21'><h3>Photoshop</h3><a href='#'>File Photoshop</a><a href='#'>Mẫu thiệp cưới PSD</a><a href='#'>Thủ thuật</a></div><div class='cont cs21'><h3>Phần mềm</h3><a href='#'>Sub 2.1</a><a href='#'>Sub 2.2</a><a href='#'>Sub 2.3</a></div><div class='cont cs21'><h3>Thủ thuật</h3><a href='#'>Sub 2.1</a><a href='#'>Sub 2.2</a><a href='#'>Sub 2.3</a></div><div class='cont cs21'><h3>Hệ điều hàng</h3><a href='#'>Sub 2.1</a><a href='#'>Sub 2.2</a><a href='#'>Sub 2.3</a></div><div class='cont cs21'><h3>Công cụ</h3><a href='https://sites.google.com/site/thaiaiti1992/Teamview_ThaiAiTi.rar' target='_blank'>Tải teamview</a><a href='#' target='_blank'>Cách Up template</a><a onclick='window.open(&#39;http://whichloadsfaster.com/&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&#39;);return false' src='#'>Ai load nhanh?</a><a onclick='window.open(&#39;http://iphone4simulator.com/&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&#39;);return false' src='#'>Test giao diện</a><a onclick='window.open(&#39;http://ictgroup.vn/HTML_Encoder.htm&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&#39;);return false' src='#'>Mã hóa code</a><a href='http://www.thaiaiti.com/p/form-rut-ngan-css.html'>Tối ưu CSS</a><a href='http://www.thaiaiti.com/2013/09/upload-va-lay-link-flash-on-gian-va.html'>Lấy Link Flash</a><a href='http://www.thaiaiti.com/2013/07/thu-thuat-lay-data-blogspot-cua-nguoi.html'>Lấy data blogger</a><a onclick='window.open(&#39;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/color-codes.swf&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=400,scrollbars=no&#39;);return false' src='#'>Bảng mã màu</a><a onclick='window.open(&#39;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/lay%20code%20flash.swf&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=400,scrollbars=no&#39;);return false' src='#'>Lấy code Flash</a><a onclick='window.open(&#39;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/photoshop%20online.swf&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&#39;);return false' src='#'>Photoshop Online</a><a onclick='window.open(&#39;http://www.ma-config.com/en/installplugin/0.html&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&#39;);return false' src='#'>Cập nhật Drivers</a><a href='/2013/01/phan-mem-vao-facebook-tot-nhat-tuyet-voi.html'>Cách vào Facebook</a><a href='https://sites.google.com/site/thaiaiti1992/Teamview_ThaiAiTi.rar' target='_blank'>Tải teamview</a><a onclick='window.open(&#39;http://www.dudamobile.com&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&#39;);return false' src='#'>Temp Mobile Blogger</a></div></div></li><li class='mg-home'><a href='/'></a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnQwU2ub04-hyO8lLdZZ-43Fhde2OwY4HCWD-iN-SS08XKUw9gplsm_pGmK-jljcQ6-rcDST6WRLJrZfwMXTgTIElp_7Glz3bfTNKbOWLzbMd_WdIU-3Z4PUcN_rBmXesArWgUhMBb-y6/s22/hot.gif'/>Khuyến mại</a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii1O60tOOjY5s4vc-dlTux7fpZ0TUyDsP-lScWtfED6jxsXKUIVwjZ0X6rGRtm4vZDNpzEDujk5pZ-0eW6Pl_bw_e-O6Ilzh79qGbrLFBsnbKMt_18DbBX2PWt7s3XH_Ho31s-ulhliO6I/s25/icon_gioithieu.png'/>Cửa hàng</a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihCQ7RHyPn9YG0FGnAXaFvQtVYtSphhBMJZH7bAgXzsdUacNVgtaOe6pRVXvqGe3JOuJS0It4A-cTIDM_hL9INkMN-dvfzs9duk5NoxqcKGZ771hew3jXRxJHXKP6KAIyRPbogln9ywBem/s25/icon_lhe.png'/>Liên hệ mua hàng</a></li><li><div class='itemkhoagiaodien'></div><a href='http://cuahangtemplate.blogspot.com/'>Giao diện</a></li><form action='/search' class='left' id='search' method='get'><input class='left gray text' name='q' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Tìm kiếm sản phẩm'/><input class='submit' type='submit'/></form></ul></div><div class='clear'></div><div class='sub'></div><div class='clear'></div></div>

- Chúc bạn thực hiện thành công !