Bagaimana Membuat Menu Dropdown Tanpa Gambar Dan No Ncript

Sekarang saya akan membahas bagaimana membuat menu dropdown tanpa gambar dan no script menggunakan css3, mengapa saya ingin membuat postingan ini karena menu drop down dengan css3 ini sangan sederhana dan simpel bahkan gak akan membuat blog kita lelet alias lemot walaupun kode ini disimpan di wideget. Mungkin anda akan merasa tertarik dengan menu dropdown ini lihat screen shotnya di bawah ini.

 Nah setelah sobat melihat gambar di atas mungkin sobat tertarik dan ingin memasangnya di blog sobat, jika jawaban sobat 'ia' maka ikuti langkah berikut ;
1. Masuk ke acount blogger
2. Dari dasbor klik rancangan
3. Tambah gadget dan pilih HTML/ JavaScript
4. Paste kode di bawah ini di tempat yang disediakan.

<style>
/*------ CSS3 Drop Down Menu By THEANT (www.theant-budiana.blogspot.com)---------*/
#theant -menu, #theant -menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#theant -menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#theant -menu:before,
#theant -menu:after {
content: "";
display: table;
}
#theant -menu:after {
clear: both;
}
#theant -menu {
zoom:1;
}
#theant -menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#theant -menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#theant -menu li:hover > a {
color: #fafafa;
}
*html #theant -menu li a:hover { /* IE6 only */
color: #fafafa;
}
#theant -menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
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-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#theant -menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#theant -menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#theant -menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#theant -menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#theant -menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#theant -menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#theant-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#theant-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#theant-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#theant-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#theant-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#theant-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="theant-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

5. Sebelum di simpan sobat ganti tulisan yang saya beri cetak tebal dengan nama-nama menu sobat dan # dengan url menu tersebut.
6. Terakhir simpan dan lihat hasilnya.

Catatan : Jangan malu jika anda tidak paham apa yang saya jelaskan atau anda ingin bertanya dengan mengisi kotak komentar di bawah, saya senang apa bila anda berkomentar terimakasih.

Mungkin anda perlu melihat ini jika anda belum mendapat kepuasan dari postingan saya ini 30 kumpulan menu navigasi horizontal untuk blog.