Lợi thế của phiên bản này là tập tin javascript rất nhẹ nhàng,thậm chí bạn không cần jquery hỗ trợ hiệu ứng của các trình đơn phụ.Về màu sắc của hiệu ứng tôi nghĩ bạn không cần chỉnh sửa gì vì thấy khá đẹp mắt.
Xem thử
Xem thử
DEMO
Làm thế nào để cài đặt menu này cho blogger
Cài đặt menu này chỉ qua 2 bướcĐầu tiên vào thiết kế chọn chỉnh sửa HTML tìm tới thẻ </head> sao chép đoạn mã dưới đây và dán vào trước nó rồi lưu mẫu
<style type='text/css'>Bước tiếp theo là tiến hành thêm một tiện ích và dán đoạn mã dưới đây vào là xong
/*
Tema: LEGO
*/
ul.menu {list-style:none;margin:10px 0;padding:0;height:33px;background-color:#A10000;font:11px Verdana,Arial;}
ul.menu * {margin:0;padding:0;}
ul.menu a {display:block;text-decoration:none;color:#7eb7fb;}
ul.menu li {position:relative;float:left;}
ul.menu ul {position:absolute;z-index:100;top:32px;left:0;background-color:#7eb7fb;display:none;opacity:0;list-style:none;-webkit-box-shadow:0 3px 5px #aaa;-moz-box-shadow:0 3px 5px #aaa;box-shadow:0 3px 5px #aaa;}
ul.menu ul li {position:relative;border:0;width:150px;margin:0;}
ul.menu ul li a {display:block;padding:7px 15px 7px;background-color:#084a9b;color:#7eb7fb;}
ul.menu ul li a:hover {background-color:#ffe30a;color:#fff;}
ul.menu ul ul {left:150px;top:-1px;}
ul.menu .menulink {padding:10px 15px 10px;font-weight:bold;text-transform:uppercase;background:#A10000;color:#fb9d9d;}
ul.menu .menulink:hover,
ul.menu .menuhover {background:#449400;color:#caecac;}
ul.menu .sub {background:#084a9b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZDBsccA2tim5sShJy99c9WBPjq8pvGNvmJmERIrNMB8kOxuKlgT8BCinrZQfdeImcJhiKgWlq4PrVNak6c5ob9fdnLmayOUWDbL5yPSt6VETxo_3ytQT43aDSuO0ykW0Qe7WKYl3HomZ/s1600/arrowgambreng.gif) 138px 10px no-repeat;color:#7eb7fb;}
ul.menu .sub:hover {color:#fff;}
</style>
<script type='text/javascript'>
//<![CDATA[
var menu=function(){var t=15,z=500,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');}}
dd.prototype.st=function(x,f){var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}}
function sl(c,f){var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'}
return{dd:dd}}();
//]]>
</script>
<ul class='menu' id='menugambreng'>Chúc thành công!
<li><a href='#' class='menulink'>HOME</a></li>
<li><a href='#' class='menulink'>PROFIL</a>
<ul>
<li><a href='#'>Item Navigasi 1</a></li>
<li><a href='#' class='sub'>Item Navigasi 2</a>
<ul>
<li><a href='#'>Item Navigasi 2 1</a></li>
<li><a href='#'>Item Navigasi 2 2</a></li>
<li><a href='#'>Item Navigasi 2 3</a></li>
<li><a href='#'>Item Navigasi 2 4</a></li>
<li><a href='#'>Item Navigasi 2 5</a></li>
</ul>
</li>
<li><a href='#' class='sub'>Item Navigasi 3</a>
<ul>
<li><a href='#'>Item Navigasi 3 1</a></li>
<li><a href='#'>Item Navigasi 3 2</a></li>
<li><a href='#' class='sub'>Item Navigasi 3 3</a>
<ul>
<li><a href='#'>Item Navigasi 3 3 1</a></li>
<li><a href='#'>Item Navigasi 3 3 2</a></li>
<li><a href='#'>Item Navigasi 3 3 3</a></li>
<li><a href='#'>Item Navigasi 3 3 4</a></li>
<li><a href='#'>Item Navigasi 3 3 5</a></li>
<li><a href='#'>Item Navigasi 3 3 6</a></li>
</ul>
</li>
<li><a href='#'>Item Navigasi 3 4</a></li>
</ul>
</li>
<li><a href='#'>Item Navigasi 4</a></li>
<li><a href='#'>Item Navigasi 5</a></li>
</ul>
</li>
<li><a href='#' class='menulink'>SUNTING</a></li>
<li><a href='#' class='menulink'>PENJAHAT</a>
<ul>
<li><a href='#'>Item Navigasi 1</a></li>
<li><a href='#' class='sub'>Item Navigasi 2</a>
<ul>
<li><a href='#'>Item Navigasi 2 1</a></li>
<li><a href='#'>Item Navigasi 2 2</a></li>
<li><a href='#'>Item Navigasi 2 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' class='menulink'>TAI KUCING</a>
<ul>
<li><a href='#'>Item Navigasi 1</a></li>
<li><a href='#'>Item Navigasi 2</a></li>
<li><a href='#'>Item Navigasi 3</a></li>
<li><a href='#'>Item Navigasi 4</a></li>
<li><a href='#'>Item Navigasi 5</a></li>
<li><a href='#' class='sub'>Item Navigasi 6</a>
<ul>
<li><a href='#'>Item Navigasi 6 1</a></li>
<li><a href='#'>Item Navigasi 6 2</a></li>
</ul>
</li>
<li><a href='#'>Item Navigasi 7</a></li>
<li><a href='#'>Item Navigasi 8</a></li>
<li><a href='#'>Item Navigasi 9</a></li>
<li><a href='#'>Item Navigasi 10</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
var menu=new menu.dd('menu');
menu.init('menugambreng','menuhover');
</script>