Cara Buat Dropdown Menu di Bloger Mg 2014

Pandi Juli 13, 2014 8 min read

1234567891011121314151617181920

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPFmNW7z2AZo7T_0ln_bWsgSefYoETdjDp7B8TDQEzxzkdNsNKuFeR0JbE_FzGjSnl4FseRZmMw0DBOzlTzzWf-8JLdL_280SmcUDUvgL5e82ck42a1l1WOnNhLKVXvhX-4qRnE_g-dg/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;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;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvlkqV-nYDpOlmk1oQZRM4eGNtCxNS43Z6LyZ8ShtrRlxKZ48iu2LxIPnstObZH0Nw_YEyTCB8w_PksIzEUygp9cEzr1JZn2J9oDgyyKi-FX0pA27B_Nx3wQMyhu09ad88vqfOnjaikbA/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDsppteNFuo3116f31ULx2PkyBsmfP42VS3fSfVNlWByUSFW9FjEaF5giYgLXWHOSbQkL3nIm7yFxY-pCtMKuFfwOokhoHUeJOTosMkIFwRquB3pDZsVxOT0QR6NNE_gSqLiUnpQJ_dQ/s1600/nav.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPFmNW7z2AZo7T_0ln_bWsgSefYoETdjDp7B8TDQEzxzkdNsNKuFeR0JbE_FzGjSnl4FseRZmMw0DBOzlTzzWf-8JLdL_280SmcUDUvgL5e82ck42a1l1WOnNhLKVXvhX-4qRnE_g-dg/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}

12345678910111213141516171819202122232425262728293031323334353637383940414243

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfTaFZUpmOYih2GVAlG8sB1AOgb-vNjpTk12glK6w-MX5aA7kdTQBCdXpsHM-bGmdYYfrsZzTWmMY7vXaQCr9H0yyv4dIAhpeK6DoWzxTOAaD8ZEn4D_cA8GBnqCLWkJBAKPU6X2a7wgg/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>