Dropmenu xổ dọc theo cột cho blogspot

» Cách thêm Dropmenu xổ dọc theo cột cho blogger

<style>
/* Menu http://blogh3b.blogspot.com// */
#menu{width:100%margin:0 auto;padding:5px auto;height:50px;width:100%;margin:0 auto;background-color:#1E75A8;background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fff), to(#1E75A8)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #1fff, #1E75A8); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #1E75A8); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fff, #1E75A8);}
#mega-menu ul {list-style: none;left:0;top:1px;z-index:99}
ul#topnav {float: left;width:98%;position: relative;height: 33px;background: none;}
ul#topnav li {float: left;height: 33px;padding: 0px;}
ul#topnav li a {font-weight:bold;padding:6px 24px 19px 10px;display: block;color: #fff;text-shadow:1px 1px 0 #111;font-size:13px;text-decoration: none;}
ul#topnav li:hover {background: #f5f5f5}
ul#topnav li:hover a#fff1, ul#topnav li:hover a#fff2, ul#topnav li:hover a#fff3, ul#topnav li:hover a#fff4, ul#topnav li:hover a#fff5, ul#topnav li:hover a#fff6{color:#111;text-shadow:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJReFrqAMzV4Y2ldGNBdkvat7RsXXdhTj6DywV7nmPyh3TQd1XobDU75DW96LgBe70XBsNt0NL6_jLLlWuzF7Oshey7Ep_xpVD2vUdgFFJ2FEsLiCZFd8J_2O1C49G3hYUwZFTTq7Ly_m/s1600/arrow_black-namkna-blogspot-com.gif);background-repeat:no-repeat;background-position:right 12px}
ul#topnav li.mg-home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9dI22yzVfbcQjyamRgi7pekFOupB-8vk6xcKOabg1KMFSe26G5_suMECed69ivfbHJ2UcNmgnO6OKflhB0d1EmoeIGBneQ3c3hprpG_JvQZOTNrZxQJ4KGuZpL9P01LFxAOIe8zH1Wdl/s1600/home-ld.fw-namkna-blogspot-com.png) no-repeat center center!important;width:45px;margin-top:-2px}
ul#topnav li.sitemap {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy-bhmYy-zjW-i1VE4-3gXalx6R2wMdISGQWLMPdm-cJiR9tF9aDh-BNG0YvuQHs86q180P-kmf00XV5VZeiWjiNUZ2L8A37rpWSymYUjvfngcCFZ3Xspy29xRfnvXfT5887cgReTbiX4j/s1600/sitemap-namkna-blogspot.png) no-repeat center center!important;width:45px;margin:0}
ul#topnav li.sitemap a {height:15px;}
ul#topnav li.mg-home a {height:15px;}
ul#topnav li div.sub {position: absolute;display: none;top: 42px;background: #fff;padding:-1px -2px 0px;border-right:1px solid #DBDBDB;border-left:1px solid #DBDBDB;border-bottom:1px solid #DBDBDB;color:#000;margin-bottom: 0px;margin-top: -2px;margin-right: -2px;z-index:0}
ul#topnav li div.sub a{font-weight:normal;text-shadow:none}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:1px;text-align:justify;}
ul#topnav li div.sub div.cont {float: left;width:100%}
ul#topnav li div.sub div.cont c1 {color:#111;padding:7px 4px;border-top:1px solid #fff;border-right:1px solid #DBDBDB;margin-top:0px;height:20px;width:179px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c2 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0;height:20px;width:150px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c3 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:153px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c4, ul#topnav li div.sub div.cont c5{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:163px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c6{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:161px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c7 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;border-right:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-right:-3px;margin-top:0px;height:20px;width:166px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block;z-index:9}
ul#topnav li div.sub div.cont c8 {color:#111;border-top:1px solid #fff;padding:7px 4px;border-right:1px solid #DBDBDB;margin-top:0px;height:20px;width:179px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c9 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:150px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c10 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:153px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c11{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:163px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c12{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:164px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c13{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:160px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c14 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;border-right:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-right:-3px;margin-top:0px;height:20px;width:166px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block;z-index:9}
ul#topnav li div.sub div.cont a{display:block; margin-top:0;padding:0;margin-right:-1px;padding:5px;color:#000;border-top:1px solid #DBDBDB;background: #fff}
ul#topnav li div.sub div.cont a:hover{background: #F48829;background: -moz-linear-gradient(top, rgba(244, 150, 75, 1) 0%, rgba(217, 87, 0, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244, 150, 75, 1)), color-stop(100%,rgba(217, 87, 0, 1)));background: -webkit-linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);background: -o-linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);background: -ms-linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#f4964b&#39;, endColorstr=&#39;#d95700&#39;,GradientType=0 );
background: linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);color:#fff !important;padding:5px;font-weight:bold}
ul#topnav li div.ms1 {width:183px;left: 0px;}
ul#topnav li div.ms2 {width:1196px;left: 0px;}
ul#topnav li div.ms3 {width:1196px;left: 0px;}
ul#topnav li div.ms4 {width:343px;left: 297px;}
ul#topnav li div.ms5 {width:343px;left: 395px;}
ul#topnav li div.ms6 {}
ul#topnav li div.sub div.cs11 {width:182px}
ul#topnav li div.sub div.cs21 {width:186px}
ul#topnav li div.sub div.cs211 {height:120px;width:156px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs212 {height:120px;width:160px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs213 {height:120px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs214 {height:120px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs215 {height:120px;width:168px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs216 {height:120px;width:173px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav li div.sub div.cs31 {width:186px}
ul#topnav li div.sub div.cs311 {height:93px;width:156px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs312 {height:93px;width:160px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs313 {height:93px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs314 {height:93px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs315 {height:93px;width:168px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs316 {height:93px;width:173px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav li div.sub div.cs41 {width:170px;}
ul#topnav li div.sub div.cs411 {width:170px;height:145px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav li div.sub div.cs51 {width:170px}
ul#topnav li div.sub div.cs511 {width:170px;height:93px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li a.ftt{background:none;font-weight:bold;padding:0 4px 0 7px;display: block;color: #fff;text-shadow:1px 1px 0 #111;font-size:13px;text-decoration: none;margin:6px 7px 0 0}
ul#topnav li:hover a.ftt{color:#111;text-shadow:none;}
ul#topnav a.f1, a.f2, a.f3, a.f4, a.f5{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUS8kk-T-jTIF2RYP2qWY215R28LLVh2_20vM8jC_SSIdJPdOLPKM1E6qAYtT5qPgDD6hnb7AZyUdvzv7TojaW_1glcUHdLeOQfpv9Zbt5-zB3OozCgB4dECjZjc4GN7EJJAcl9dTbtTx/s1600/arrow_white-namkna-2.gif);background-repeat:no-repeat;background-position:right 12px}
ul#topnav a.f1:hover, a.f2:hover, a.f3:hover, a.f4:hover, a.f5:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJReFrqAMzV4Y2ldGNBdkvat7RsXXdhTj6DywV7nmPyh3TQd1XobDU75DW96LgBe70XBsNt0NL6_jLLlWuzF7Oshey7Ep_xpVD2vUdgFFJ2FEsLiCZFd8J_2O1C49G3hYUwZFTTq7Ly_m/s1600/arrow_black-namkna-blogspot-com.gif);background-repeat:no-repeat;background-position:right 12px}
#search{background:transparent;float:right;width:180px;height:19px;margin-top:3px}
#search form{float:left}
#search input[type="text"]{background:#DDD;float:left;border:1px solid #444343;width:146px;margin-top:1px;padding:2px 15px;font-size:12px;text-align:right}
#search input[type="text"]:focus{background:#FFF}
#search input[type="submit"]{display:none}
</style>
<!--Menu Start http://blogh3b.blogspot.com/ -->
<div id='menu'>
<div id='mega-menu'>
<ul id='topnav'>
<li><a class='f1' href='/' id='fff1'><img height='25px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMMe-dMV3E3DPbnyzRlwlZNc_MEa_XtWJI7YgmYsJBysvd-P5gI4oIoPqkDwZINCG2Yc4slHtzrKZrimECdoxBnMakweMRTQkfO38nEILhEhwtB0dY7YeGpWKbevH0GYdBJBSeE69H5md7/s1600/icon_home-namkna-2.png' style='margin-top:-3px'/></a>
<div class='sub ms1'>
<div class='cont cs11'>
<a href='/2011/04/tac-gia-linh-dung.html'>Tác giả</a>
<a href='/p/thong-bao-cua-linhdungvncom.html'>Thông báo</a>
<a href='/2012/09/ra-mat-linhdungvncom-blog-ve-mmo.html'>BlogH3b.blogspot.COM</a>
<a href='/search/label/Tin%20t%E1%BB%A9c?max-results=10'>Tin tức MMO</a>
<a href='/p/lien-he.html'>Thông tin liên hệ</a>
<a href='/p/chinh-sach-comment.html'>Chính sách comments</a>
<a href='/p/quy-inh-su-dung.html'>Điều khoản sử dụng</a>
</div></div></li>
<li><a class='f2' href='#' id='fff2'>Ngân hàng</a>
<div class='sub ms2'>
<div class='cont cs21'>
<c1>Payza</c1>
<a href='/2012/09/dang-ky-va-verify-payza-alertpay-cu.html'>Đăng ký và verify</a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBj8pdVYL_cqBYCHHj6lTNKLhU2UNiYUjqpUPW5w6SpuXXnFE_DMPzY2p2mFhpwWgT8pO36wkADkuIIxkqGUqSxZhlXEfcTkDaIjomX1tIGQIVCepecfu06vGJbSLPGDgk1Jrrq1CfRM0/s1600/fee-PZ-VN.png' rel='prettyphoto'>Một số loại phí</a>
<a href='#' rel='prettyphoto'>Hướng dẫn chuyển tiền</a>
</div>
<div class='cont cs211'>
<c2>Liberty Reserve</c2>
<a href='/2012/09/huong-dan-dang-ky-tai-khoan-liberty-reserve.html'>Hướng dẫn đăng ký</a>
<a href='http://3.bp.blogspot.com/-WZ_S_9xLVXk/T5rT0EauLeI/AAAAAAAAEC4/ojGYqcTLpKM/s1600/fee%2Blr.png' rel='prettyphoto'>Một số loại phí</a>
</div>
<div class='cont cs212'>
<c3>Paypal</c3>
<a href='/2011/10/dang-ky-va-verified-tai-khoan-paypal.html'>Hướng dẫn đăng ký</a>
<a href='/2012/10/mot-so-luu-y-khi-su-dung-paypal.html'>Một số lưu ý</a>
</div>
<div class='cont cs213'>
<c4>WebMoney</c4>
<a href='/2012/09/huong-dan-tao-tai-khoan-dien-tu-webmoney.html'>Hướng dẫn đăng ký</a>
</div>
<div class='cont cs214'>
<c5>Egopay</c5>
<a href='/2012/10/huong-dan-dang-ky-tai-khoan-egopay.html'>Hướng dẫn đăng ký</a>
</div>
<div class='cont cs215'>
<c6>Perfect Money</c6>
<a href='/2012/10/huong-dan-dang-ky-tai-khoan-perfect-money.html'>Hướng dẫn đăng ký</a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJ32yP6p5RhFzcDs6BapL0pBfPkJYUHgEjZ6FpMoUreluHGhhfC5sRQKNwMZwcqhaqvcteB6GpIUH4eFwpoHms5iBg2JWSjvX5la102wyKGy4VjlSV5pS3NuGKg-VhscN2b3R95py0iU/s1600/fee-pm.png' rel='prettyphoto'>Một số loại phí</a>
</div>
<div class='cont cs216'>
<c7>Thông tin</c7>
<a href='/2012/09/zip-code-postal-code-cac-tinh-thanh.html'>Zip Code</a>
</div>
</div>
</li>
<li><a class='f3' href='#' id='fff3'>Chương trình</a>
<div class='sub ms3'>
<div class='cont cs31'>
<c8>ADF.LY</c8>
<a href='http://blog.linhdungvn.com/2013/03/huong-dan-kiem-tien-voi-rut-gon-link-adfly.html'>Hướng dẫn đăng ký</a>
</div>
<div class='cont cs311'>
<c9>Chương trình mới</c9>
</div>
<div class='cont cs312'>
<c10>Đang cập nhật</c10>
</div>
<div class='cont cs313'>
<c11>Chương trình mới</c11>
</div>
<div class='cont cs314'>
<c12>Đang cập nhật</c12>
</div>
<div class='cont cs315'>
<c13>Chương trình mới</c13>
</div>
<div class='cont cs316'>
<c14>Chương trình mới</c14>
</div>
</div></li>
<li><a class='f4' href='#' id='fff4'>Blogspot</a>
<div class='sub ms4'>
<div class='cont cs41'>
<a href='/search/label/C%C4%83n%20b%E1%BA%A3n?max-results=10'>Giới thiệu căn bản</a>
<a href='/search/label/Thủ thuật?max-results=10'>Thủ thuật</a>
<a href='/search/label/Thi%E1%BA%BFt%20k%E1%BA%BF?max-results=10'>Hướng dẫn thiết kế</a>
<a href='/search/label/Thi%E1%BA%BFt%20k%E1%BA%BF?max-results=10'>Kỹ năng</a>
<a href='/search/label/SEO?max-results=10'>SEO</a>
</div>
<div class='cont cs411'>
<a href='/search/label/Hosting?max-results=10'>Hosting</a>
<a href='/search/label/CSS?max-results=10'>CSS</a>
<a href='/search/label/HTML?max-results=10'>HTML</a>
<a href='/search/label/Mã giảm giá?max-results=10'>Mã giảm giá</a>
<a href='http://software.linhdungvn.com/search/label/Templates?max-results=10'>Mẫu Blog</a>
</div></div></li>
<li><a class='f5' href='#' id='fff5'>Công cụ</a>
<div class='sub ms5'>
<div class='cont cs51'>
<c11>MMO</c11>
<a href='/2012/12/roboform-cong-cu-dien-form-nhanh-chong.html'>Roboform</a>
</div>
<div class='cont cs511'>
<c11>Blogspot</c11>
<a href='/p/code-converter.html'>Code Converter</a>
<a href='/p/blog-page.html'>Hex Color Codes</a>
</div>
</div></li>
<li class='sitemap'><a href='/p/sitemap_4.html' title='Sơ đồ trang web'></a></li>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</ul>
</div>
</div>
<div class='clear'>