Dropdown Menu Super Ringan

Dropdown Menu Super Ringan - Dropdown menu adalah sebuah widget yang berfungsi sebagai navigasi sebuah blog. Namun terkadang, dropdown menu dilengkapi gambar, javascript, atau css yang terlalu panjang yang mana itu akan mempengaruhi kecepatan loading blog karena kecepatan loading blog adalah sesuatu yang di perlukan oleh sebuah blog untuk memudahkan pengunjung blog mengunjungi blog kita.

Pada kesempatan kali ini saya akan share Dropdown Menu Super Ringan di dalam Dropdown menu ini tidak terdapat gambar dan javascript hanya dengan permainan gradient saja. Jika sobat berminat Silahkan Mengikuti langkah-langkah dibawah ini:

Login ke akun Blogger sobat.
Klik Tata Letak >> Tambah widget
Pilih HTML/JavaScript
Copy Paste Kode di bawah ini

Tampilan seperti ini !!

copy dalam kotak Highlight

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
/*------ CSS3 Drop Down Menu By ASPAR SUSANTO (www.aspar69susanto.blogspot.com)---------*/
#menui, #menui ul {
margin: 0;
padding: 0;
list-style: none;
}
#menui {
width: 960px;
margin:  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;
}
#menui:before,
#menui:after {
content: "";
display: table;
}
#menui:after {
clear: both;
}
#menui {
zoom:1;
}
#menui 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;
}
#menui 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;
}
#menui li:hover > a {
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);
color: #fafafa;
}
*html #theant -menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menui 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;
}
#menui li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menui 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);
}
#menui 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;
}
#menui ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menui ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menui 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);
}
#menui 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;
}
#menui 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;
}
#menui 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;
}
#menui ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menui ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menui 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;
}
.navsearch{width:300px;float:right;margin:0 auto;padding:0 auto}
</style>

<br />
<ul id="menui">
<li>cara membuat Menu dropdown Ringan</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Menu 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Menu 2</a></li>
<li><a class="arrow" href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Drop Down 1</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Sub menu 1 Drop Down 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Sub menu 2 Drop Down 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Sub menu 3 Drop Down 1</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Menu 3</a></li>
<li><a class="arrow" href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Drop Down 2</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Sub menu 1 Drop Down 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Sub menu 2 Drop Down 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=1546329933909035661#">Sub menu 3 Drop Down 2</a></li>
</ul>
</li>
</ul>
</div>

5. Ganti yang berwarna Merah dengan judul menu dan ganti # dengan url yang akan dituju.
Klik Simpan