Cara Membuat Drop Down Menu

1.Buka rancangan(blogspot)>>edit html>>Coppy dan pastekan kode di bawah ini dan taruh persis di atasnya kode </head> tag.

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkVvsFc0pqQWvpfcgySWBUXEGIUHGW3IRNq6hR8Z1dpL-Y01vPeo1FNwFTnn7WH8ojU3NLiCUM563n4iwpmyqzRLlhiuQOlMTcIrgejGxaQTaA6Ob0RWbaZ2pQFDNMq4P5tnCuRSfX_xO/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ROznQ2f_v8sJhdvoTTJxCCrtyggHlE7bFI1lkoxDQx2_10CtfaB6AvepZRVQ4MzofElN1cm9yfxgpurFsAyXaHJcJCjErOvsttM1cUUiiyHYBUgoKySWoC2qWjZcF2cdII2GXKwTczd6/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkVvsFc0pqQWvpfcgySWBUXEGIUHGW3IRNq6hR8Z1dpL-Y01vPeo1FNwFTnn7WH8ojU3NLiCUM563n4iwpmyqzRLlhiuQOlMTcIrgejGxaQTaA6Ob0RWbaZ2pQFDNMq4P5tnCuRSfX_xO/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ROznQ2f_v8sJhdvoTTJxCCrtyggHlE7bFI1lkoxDQx2_10CtfaB6AvepZRVQ4MzofElN1cm9yfxgpurFsAyXaHJcJCjErOvsttM1cUUiiyHYBUgoKySWoC2qWjZcF2cdII2GXKwTczd6/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

2.Copy dan Paste kode di bawah ini di gadget(html/javascipt)

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='#' title='#'>menu1</a></li>

<li><a href='#' title='#'>menu2</a>

<ul class='children'>

<li><a href='#' title='#'>sub menu2.1</a></li>

<li><a href='#' title='#'>sub menu2.2</a></li>

<li><a href='#' title='#'>sub menu2.3</a></li>

</ul>

</li>

<li><a href='#' title='#'>menu3</a>

<ul class='children'>

<li><a href='#' title='#'>sub menu3.1</a></li>

<li><a href='#' title='#'>sub menu3.2</a></li>

<li><a href='#' title='#'>sub menu3.3</a></li>

<li><a href='#' title='#'>sub menu3.4</a></li>

</ul>

</li>

<li><a href='#' title='#'>menu4</a>

<ul class='children'>

<li><a href='#' title='#'>sub menu4</a></li>

</ul>

</li>

<li><a href='#' title='#'>menu5</a></li>

<li><a href='#' title='#'>menu6</a>

<ul class='children'>

semoga bermanfaat..

Artikel Terkait: