Cara Membuat Menu Drop Down Green Black

LANGKAH-LAHKAHNYA

• Login ke blog kamu
• Pilih Template > Edit HTML > Cari kode ]]></b:skin>
• Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* Mega Menu Header
----------------------------------------------- */
#Black_menu {
border: 1px solid #054C04;
border-top: 1px solid #054C04;
background:#003300;
width: 100%;
margin:0px;
padding:0px;
font-size: 12px;
font-family:Arial;
font-weight:bold;
}

#Black_menu ul {
height:30px;
list-style:none;
margin:0;
padding:0px;
}

#Black_menu li{
float:left;
padding:0px;
}

#Black_menu li a {
background:#003300;
color:#cccccc;
display:block;
font-weight:bold;
line-height:30px;
border-right: 1px solid #444444;
margin:0px;
padding:0px 50px;
text-align:center;
text-decoration:none;
}

#Black_menu li a:hover, #Black_menu ul li:hover a {
background: #007000;
color:#FFFFFF;
text-decoration:none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

#Black_menu li ul {
background:#007000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:250px;
z-index:200;
/*top:1em;
/*left:0;*/
}

#Black_menu li:hover ul {
display:block;
}

#Black_menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:250px;
}

#Black_menu li:hover li a {
background:none;
}

#Black_menu li ul a {
display:block;
height:30px;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight:normal;
border-bottom: 1px solid #444;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

#Black_menu li ul a:hover, #Black_menu li ul li:hover a {
background:#003300;
border:10px;
color:#0AFF0A;
border-bottom: 1px solid #0AFF0A;
text-decoration:none;
margin-left: 0px;
padding:0px 10px 0px 15px;
}

• Setelah itu cari code </header>
• Setelah ketemu letakan kode HTML di bawah ini tepat di atas kode </header>

<div id='Black_menu'>
<ul>

<li class='active '><a href='#'><span>BERANDA</span></a></li>

<li class='sub '><a href='#'><span>BLOGGER</span></a>

<ul>

<li><a href='#'><span>Seo</span></a></li>

<li><a href='#'><span>Template</span></a></li>

<li><a href='#'><span>Widgets</span></a></li>

<li><a href='#'><span>Plugins</span></a></li>

</ul>

</li>

<li><a href='#'><span>APLICATION</span></a>

<ul>

<li><a href='#'><span>HTML Encoder</span></a></li>

<li><a href='#'><span>HTML Editor</span></a></li>

</ul></li>

<li><a href='#'><span>TOOLS</span></a>

<ul>

<li><a href='#'><span>Online HTML Editor</span></a></li>

<li><a href='#'><span>Color Code</span></a></li>

<li><a href='#'><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href='#'><span>COLOR CODE</span></a></li>

</ul>

 </div>

• Save Template
• Selesai Dan Lihat Hasilnya

Keterangan :

1. Ganti Test yang berwarna BIRU dengan kata-kata yang anda inginkan
2. Ganti # berwarna MERAH dengan Link yang anda inginkan.