Template Blog gratis: Cara pasang Menu dropdown Di Blog

Senin, 04 Januari 2016

Cara pasang Menu dropdown Di Blog

20.29.00 | Diposting oleh Unknown | | | Edit Entri

1..Masuk ke Akun Blog Anda. / Dasbord
2..Tata Letak. Tambahkan Gadget
3..HTML javascriv
4..Beri nama
5..Copy Dan Pastekan Java scriv di bawah ini sesui selera Save (Hightlight All)
Menu ini Bisa di pasang di Atas Di Tengah Atau Di Sisi kanan kiri dan Di Wawah

---------------------------------------------------------------------------------------------------

1..

Merah putih

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

---------------------------------------------------------------------------------------------------

2..

Hitam putih

color:#232323;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:auto}#cssmenu > ul > li{float:left;margin-left:15px;position:relative}#cssmenu > ul > li > a{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul > li > a:hover{color:#fff}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu > ul > li > ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu > ul ul > li{position:relative}#cssmenu ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul > li:hover > ul{opacity:1;left:190px;visibility:visible}#cssmenu ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Product</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

---------------------------------------------------------------------------------------------------

3..

Merah Abu abu

<style type="text/css">@charset 'UTF-8';#cssmenu{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenu > ul{margin-top:6px !important}#cssmenu ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid #A8A8A8;-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenu ul ul{border-top:6px solid #a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenu ul ul a{line-height:43px}#cssmenu ul ul ul{left:100%;top:0}#cssmenu li{float:left;padding:0 8px}#cssmenu li a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{color:#000;text-decoration:none}#cssmenu li ul{background:#e0e0e0;border-left:2px solid #a80329;border-right:2px solid #a80329;border-bottom:2px solid #a80329;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover > ul{display:block}#cssmenu li li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenu li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenu p{clear:left}#cssmenu .active > a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;color:#fff}#cssmenu .active > a:hover{color:white}</style><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

---------------------------------------------------------------------------------------------------
4..
Hitan pudar

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#fff;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #333}#cssmenu ul{list-style:none}#cssmenu > ul > li{float:left}#cssmenu > ul > li.active a{background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRlGC93lkRN_AESi766ywxJoncoHaJKkVxIgMbriFWz6MG-rflVnevMptD_UHYIhh8uylZpC9AbbW0GMMUibgb6tWxwxGOVmclH5RH-kpm36lrB2BVEXotprzcOe1UrewW_J5yLAlQeXn/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-moz-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-webkit-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;filter:none}#cssmenu > ul > li.active a:hover{background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);filter:none}#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #8a8a8a;-moz-box-shadow:inset 0 0 0 1px #8a8a8a;-webkit-box-shadow:inset 0 0 0 1px #8a8a8a;background:#4a4a4a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRlGC93lkRN_AESi766ywxJoncoHaJKkVxIgMbriFWz6MG-rflVnevMptD_UHYIhh8uylZpC9AbbW0GMMUibgb6tWxwxGOVmclH5RH-kpm36lrB2BVEXotprzcOe1UrewW_J5yLAlQeXn/s1600/grad_dark.png) repeat-x left top;background:-moz-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#626262),color-stop(100%,#787878));background:-webkit-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-o-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-ms-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:linear-gradient(to bottom,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);border-bottom:1px solid #5d5d5d;border-top:1px solid #5d5d5d;border-right:1px solid #5d5d5d;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul > li a:hover{background:#8a8a8a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRlGC93lkRN_AESi766ywxJoncoHaJKkVxIgMbriFWz6MG-rflVnevMptD_UHYIhh8uylZpC9AbbW0GMMUibgb6tWxwxGOVmclH5RH-kpm36lrB2BVEXotprzcOe1UrewW_J5yLAlQeXn/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(50%,#4a4a4a),color-stop(51%,#3b3b3b),color-stop(100%,#525252));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);filter:none}#cssmenu > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #5d5d5d}#cssmenu > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;/* IE7 */ *width:100%}#cssmenu .has-sub ul li{text-align:center}#cssmenu .has-sub ul li a{border-top:0 none;border-left:1px solid #5d5d5d;display:block;line-height:120%;padding:9px 5px;text-align:center}</style><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

---------------------------------------------------------------------------------------------------

5..

Abu abu Silper

<style type="text/css">#cssmenu ul{margin:0;padding:7px 6px 0;background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrycHVtb3LVZXUuWRbxcBYN_ZiGKqdg6F7_V_SmVcNR7fObK9CS-9omZzkqoRpcmzRlL5mxsJrHBAdOLz2g1aQcaraFI9W0K7nQNBXyOg-mrhXrmW1ocf0EgsfDs3XanqNm-QrADBuVAi/s1600/overlay.png) repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0 8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px 20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a{background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrycHVtb3LVZXUuWRbxcBYN_ZiGKqdg6F7_V_SmVcNR7fObK9CS-9omZzkqoRpcmzRlL5mxsJrHBAdOLz2g1aQcaraFI9W0K7nQNBXyOg-mrhXrmW1ocf0EgsfDs3XanqNm-QrADBuVAi/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrycHVtb3LVZXUuWRbxcBYN_ZiGKqdg6F7_V_SmVcNR7fObK9CS-9omZzkqoRpcmzRlL5mxsJrHBAdOLz2g1aQcaraFI9W0K7nQNBXyOg-mrhXrmW1ocf0EgsfDs3XanqNm-QrADBuVAi/s1600/overlay.png) repeat-x 0 -40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul li:hover a,#cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrycHVtb3LVZXUuWRbxcBYN_ZiGKqdg6F7_V_SmVcNR7fObK9CS-9omZzkqoRpcmzRlL5mxsJrHBAdOLz2g1aQcaraFI9W0K7nQNBXyOg-mrhXrmW1ocf0EgsfDs3XanqNm-QrADBuVAi/s1600/overlay.png) repeat-x 0 -100px !important;color:#fff !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}#cssmenu li:hover > ul{display:block}#cssmenu ul ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrycHVtb3LVZXUuWRbxcBYN_ZiGKqdg6F7_V_SmVcNR7fObK9CS-9omZzkqoRpcmzRlL5mxsJrHBAdOLz2g1aQcaraFI9W0K7nQNBXyOg-mrhXrmW1ocf0EgsfDs3XanqNm-QrADBuVAi/s1600/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-size:12px}#cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}* html #cssmenu ul{height:1%}</style><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="3" alt="" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

---------------------------------------------------------------------------------------------------
5..

Biru Guardian

<style type="text/css">#cssmenu ul{margin:0;padding:0;list-style-type:none;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizAtL7PYOYba1QVcT7a_QKDAc0oocK6X-C-k6G9cjU6e4P6n5ghIs86zpRhcy-BPBWB00JRRN6D6NLfhRrUl4sC3f6C1LtFvuC7dXFhw8IGntFPVxS_2V97UrhakFJHb-Cs6gq7BYF3hI2/s1600/off.gif') repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #004c99;border-top:1px solid #74b0c6;width:auto}#cssmenu li{display:block;float:left;margin:0;padding:0}#cssmenu li a{display:block;float:left;color:#6d7078;text-decoration:none;font-weight:bold;padding:12px 20px 0 20px;height:24px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHq9g0cJQQYAUHvMwin9808ge0mqOCH3jstYH8PN0FXWWyDKCSyqoZOAXWE8snX6Xr1LJrwZZRy4Vdg69vGRVti9E5MWlS1WevTwWal9S7lx9U395wGTKG8Jz5wc-tcQR9OXUHV4od8Veg/s1600/divider.gif') no-repeat top right}#cssmenu li a:hover{background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOpxn47s4plsFxZBBIpU_zdsvnyx_JvD5qBzKpYE7D2OIxyW02OkHEifo5yalhXXgMJBTtjl9qLAL_BDheoF8Zq0AcIAlv6EI0m0aFTndS2RG9ROibYbcAoYunTt4Vz9YagOqRsR1ZZa1/s1600/hover.gif') no-repeat top right;color:#6d7078}</style><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li><a href="http://instalyu.blogspot.co.id/2016/06/download-template-blog-free.html"><span>Template</span></a></li>
<li><a href="http://instalyu.blogspot.co.id/2016/01/cara-pasang-menu-dropdown-di-blog.html"><span>Dropdown</span></a></li>
<li><a href="https://www.youtube.com/watch?v=NDxZyDnhMS4&list=PLzebJ_leEW6Id6hycoV2jauHGLroWZSsH"><span>Vidio</span></a></li>
<li><a href="#"><span>TV.ONLINE</span></a></li>
<li><a href="#"><span>Radio.fm</span></a></li>
<li><a href="#"><span>Linux</span></a></li>
</ul>
</div>

----------------------------------------------------------------------------------------------------

6..

Panjang dan hitam opal

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='#' rel='nofollow' target='_blank'>Pilihan</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>tv online </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
<li><a href='#' rel='nofollow' target='_blank'>Bloger</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Linux </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
<li><a href='#' rel='nofollow' target='_blank'>Kategori </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Vidio tutorial</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Group</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu
5</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu
<li><a href='/'>Home</a></li>
</a></li>
</ul>
<li><a href='#' rel='nofollow' target='_blank'>Lain Lain</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu
3.5</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
</li>
</li>
</li>
</ul>

----------------------------------------------------------------------------------------------------

7
Hitam Kotak

<style>
#menu
{
width: 117.2%;
margin: 0;
padding: 0px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 0px;
border-radius: 0px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 0px 0px #9c9c9c;
box-shadow: 0 0px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 0px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 29px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Halaman</a></li>
<li><a href='#' rel='nofollow' target='_blank'>Drop down </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Pilihan Populer</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu </a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Group bloger</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
<li><a href='/'>Home</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Software</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Template</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Trik Android</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Vidio tutorial</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
</ul>

Selamat Mencoba

Label:Menu drop down

2 komentar:

Unknown11 Maret 2016 pukul 19.55
habis itu gmn gan? biar bisa ada isinya.
BalasHapus
Balasan

Tambahkan komentar

Langganan: Posting Komentar (Atom)