Menu Drop Down Unik

Cara Pemasangnya apabila anda penasaran silahkan dicoba mungkin ini juga bisa dicoba Menu drop Down Blod merah.

• Login keblog anda edit template
• Cari code ]]></b:skin> copy code dibawah letakkan tepat diatasnya

nav {

height:35px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiscyRV24S2YqO-seaDjAGHHvPGW27mdtvUSKZnbT3DQkg1TLwqRlO9V9flQuGWHhAxRPrR1bc2OVrqn6-pApeB1cBfMKo03zssDR6Lvgc1IhFifCq0hXhya2FVdL9KDLBRYv9eMNc7OqVX/s1600/bg.gif) repeat-x;

position:relative;

font-family:arial, verdana, sans-serif;

font-size:11px;

width:100%;

z-index:100;

margin:0;

padding:0;

}

.nav .table {

display:table;

margin:0 auto;

}

.nav .select,

.nav .current {

margin:0;

padding:0;

list-style:none;

display:table-cell;

white-space:nowrap;

}

.nav li {

margin:0;

padding:0;

height:auto;

float:left;

}

.nav .select a {

display:block;

height:35px;

float:left;

font-weight:bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiscyRV24S2YqO-seaDjAGHHvPGW27mdtvUSKZnbT3DQkg1TLwqRlO9V9flQuGWHhAxRPrR1bc2OVrqn6-pApeB1cBfMKo03zssDR6Lvgc1IhFifCq0hXhya2FVdL9KDLBRYv9eMNc7OqVX/s1600/bg.gif);

padding:0 30px 0 30px;

text-decoration:none;

line-height:35px;

white-space:nowrap;

color:#2b3238;

}

.nav .select a:hover,

.nav .select li:hover a {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Upb3uPXcj7Izk-HVU6xK_a-tKtBf30P0m4YEnjcOlZH01pC6_Y2lK4SRIe8Pee46nV6TR9TKBK94ni280MSAB__fZeUEf6T3QjJj0awu93lrBmMwMSNvo6R-SaMmRwDBJe-l-d6mMA7w/s1600/hover.gif);

padding:0 0 0 15px;

cursor:pointer;

color:#2b3238;

}

.nav .select a b{

font-weight:bold;

}

.nav .select a:hover b,

.nav .select li:hover a b {

display:block;

float:left;

padding:0 30px 0 15px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Upb3uPXcj7Izk-HVU6xK_a-tKtBf30P0m4YEnjcOlZH01pC6_Y2lK4SRIe8Pee46nV6TR9TKBK94ni280MSAB__fZeUEf6T3QjJj0awu93lrBmMwMSNvo6R-SaMmRwDBJe-l-d6mMA7w/s1600/hover.gif) right top;

cursor:pointer;

}

.nav .select_sub {

display:none;

}

/* IE6 only */

.nav table {

border-collapse:collapse;

margin:-1px;

font-size:1em;

width:0;

height:0;

}

.nav .sub {

display:table;

margin:0 auto;

padding:0;

list-style:none;

}

.nav .sub_active .current_sub a,

.nav .sub_active a:hover {

background:transparent;

color:#2b3238;

}

.nav .select :hover .select_sub,

.nav .current .show {

display:block;

position:absolute;

width:100%;

top:35px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifgjPei60_vyj92kj8G0FIRm0JIL2tIk3IF_WHbeLPMokJ8we_JnV81Yc9xECTTEUfP9sKoxQYdTPc_Ax67rr3v5WsPLFRVUItYz0BzHEkNgu-PP0R1Oo3fsrj8BqrwCVoKS2HwoyI8HJR/s1600/back.gif);

padding:0;

z-index:100;

left:0;

text-align:center;

}

.nav .current .show {

z-index:10;

}

.nav .select :hover .sub li a,

.nav .current .show .sub li a {

display:block;

float:left;

background:transparent;

padding:0 10px 0 10px;

margin:0;

white-space:nowrap;

border:0;

color:#2b3238;

}

.nav .current .sub li.sub_show a {

color:#2b3238;

cursor:default;

}

.nav .select .sub li a {

font-weight:normal;

}

.nav .select :hover .sub li a:hover,

.nav .current .sub li a:hover {

visibility:visible;

color:#73a0d2;

}

<!--[if IE]>

.nav ul {display:inline-block;}

.nav ul {display:inline;}

.nav ul li {float:left;}

.nav {text-align:center;}

.nav .select a:hover b,

.nav .select li:hover a b {float:none;}

<![endif]-->

• Simpan Template.
• Scrol mouse klik tata letak tambah gadget HTML/javascript copy code dibawah paste didalamnya.

<div class="nav">

<div class="table">

<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</div>

</li>

</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

</ul>

</div>

</li>

</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

</ul>

</div>

</li>

</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

</ul>

</div>

</li>

</ul>

</div>

</div>

•  Ok simpan selesai semoga bermanfaat...