• Dashboard >>> Tata Letak >>> Tambah Gadget >>> HTML/Javascript
• Copy paste kode ini :

<style>

/* Menu Horizontal Dropdown ----------------------------------------------- */

 #menuwrapper{

width:960px;

height:30px;

background:#D2B48C;

margin:0 auto;

} 

.clearit{

clear:both;

height:0;

line-height:0.0;

font-size:0}

 #menubar{

width:100%}

 #menubar,#menubar ul{

list-style:none;

font-family:Arial, serif;

}

 #menubar a{  display:block;

text-decoration:none;

font:13px calibri;  color:#666;

text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;

margin-left:20px;

padding-top:9px;

padding-left:18px;

padding-right:18px;

text-align:center;}

#menubar a.trigger{

text-align:center;

background-image:url(http://i.imgur.com/peRXtgL.gif);

background-repeat:no-repeat;

background-position:left center;

padding-left:18px;

padding-right:18px;

}

#menubar li{

float:left;

position:static;

width:auto}

#menubar li ul,#menubar ul li{

width:170px}

#menubar ul li a{

text-align:left;

color:#666;

font-size:11px;

font-weight:400;

font-family:Arial;

border:none;

padding:5px 10px}

#menubar li ul{

z-index:100;

position:absolute;

display:none;

background:#eee;

padding-bottom:5px;

border:1px dashed #fff;}

 #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{

background:#D2B48C;

color:#778899;}

 #menubar li:hover ul,#menubar li.hvr ul{display:block}

#menubar li:hover ul a,#menubar li.hvr ul a{

color:#3c3c3c;

background-color:transparent;

text-decoration:none}

#menubar li ul li.hr{

border-bottom:1px solid #fff;

border-top:1px solid #fff;

display:block;

font-size:1px;

height:0;

line-height:0;

margin:4px 0}

#menubar ul a:hover{

background-color:#ccc!important;

color:#666!important;

text-decoration:none}

 </style>

<div id='menuwrapper'>

<ul id='menubar'>

<li><a href='http://www.blogger.com/home'><img border='0' src='http://i.imgur.com/f8pbAeb.png' style='padding:0px;'/> Home</a></li>

<li><a class='trigger'>TITLE</a>

<ul>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

  <li><a href='PUT YOUR LINK'>Sub-title</a></li>

</ul>

</li>

<li><a class='trigger'>TITLE</a>

<ul>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

  </ul>

</li>

<li><a class='trigger'>TITLE</a>

<ul>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

</ul>

</li>

<li><a class='trigger'>TITLE</a>

<ul>

  <li><a href='PUT YOUR LINK'>Sub-title</a></li>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

</ul>

</li>

<li><a class='trigger'>TITLE</a>

<ul>

  <li><a href='PUT YOUR LINK'>Sub-title</a></li>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

</ul>

</li>

<li><a class='trigger'>TITLE</a>

<ul>

<li><a href='PUT YOUR LINK'>Sub-title</a></li>

  <li><a href='PUT YOUR LINK'>Sub-title</a></li>

  </ul>

  </li>

  <li><a href='PUT YOUR LINK'>TITLE</a></li>

<li><a href='PUT YOUR LINK'>TITLE</a></li>

  </ul>

  </div>

• Simpan

Labels: ♫ Tutorial, navigation