Simple Menu Drop Down CSS3 Black Editions

Simple Menu Drop Down CSS3 Black Editions – ini merupakan menu drop down dengan sudut rounded cerners atau bisa dikatakan setengah lingkaran. Menu Drop Down CSS3 Black Editions ini memang sangat simple dan tidak banyak menggunakan warna, mungkin hanya bisa serasi dengan template yang berwarna gelap saja.

Namun apabila ingin menggunakan warna lain silahkan bisa dicoba sendiri dengan mengubah warna pada kode CSS yang ada dibawah. Kode CSS menu drop down ini masih menggunakan warna default yang tertera seperti pada gambar diatas/diawal posting. Warna background dan warna hpver silahkan sesuaikan dengan yang di inginkan jika anda ingin menggunakan warna lain saat akan dipasang pada blog anda. Untuk cara pemasangannya kedalam blog, berikut adalah tutorial cara memasang Simple Menu Drop Down CSS3 Black Editions pada blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
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-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#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;
}

#menu li:hover > ul{
display: block;
}

#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-border-radius: 5px;
border-radius: 5px;
}

#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: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#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;
-webkit-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 li:first-child a:hover:after{
border-bottom-color: #04acec;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk memanggil dan menampilkan Simple Menu Drop Down CSS3 Black Editions di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode ini didalamnya:

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorial</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Keterangan:
Silahkan ubah tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara membuat Simple Menu Drop Down CSS3 Black Editions di blog.