Cara Membuat Menu Horizontal Drop Down Versi 2

Hai sob kali ini saya akan menulis tentang bagaimana cara membuat menu horizontal di blog.  sobat pingin tahu cara membuatnya dan ingin memasangkan nya di Blog sobat silahkan ikuti langkah-langkah di bawah ini.

Coba sobat liat dulu demonya disini

Klik Disini Untuk demo

• Login Ke Blog kamu.
• Pilih Rancangan.
• Pilih EDIT HTML.
• Lalu cari kode ]]></b:skin>
• Setelah ketemu Copy kode dibawah ini tepat diatas kode ]]></b:skin>

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmfZeyv8gedQjgfaTyu9_-8BqKsoa4T_h62mjjQVwUqTi7uDKwlN7GBiYuzdOs8elgdjab_6tCQPwalA6dGA4rRRFmCyHvKGqUvH9bcnOQjI3lOM_4qHIBH9156uS57EHDTcOr5xJm8n6/) 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/AVvXsEj0ehTT46QcAeRjk_L-LjbpjRSh0eLA6DIPQLuCdmre2N3nXD-Atbin-Hskt2PfE9Slj8ds7EZj7yk-q0Gd030LQ-eFRlKqR6JMS2whlDTcoJ6_jvnjpjFNTm_9SeK3VyrB-25EEnhnXOY9/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/AVvXsEhK56pU8iy3HdsONDl7scX284hiJ339NNp3IykqH-a1AcOEXDu157_dHN2p4MFLZWCMnrt5RZNx3TZ3gKjhTR1LnTi8MvwuI9BzJ-akdpoB9V9-aX1R1UHKL7SRViHp1Ek7BTlQrVrBcsdg/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/AVvXsEhK56pU8iy3HdsONDl7scX284hiJ339NNp3IykqH-a1AcOEXDu157_dHN2p4MFLZWCMnrt5RZNx3TZ3gKjhTR1LnTi8MvwuI9BzJ-akdpoB9V9-aX1R1UHKL7SRViHp1Ek7BTlQrVrBcsdg/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/AVvXsEjEqFz5n-jC2yKjSIVNaI7ke8KcIbRgxhGDRra_gvnixjKwp2AyqE6fI3OonoMFjfKe2wugahjLNhL3dw2uYW8qEiRSfDMxBeJpJnYCaZ1x2VJCNKC2bTXrbfaLE5BzapZnedDCVpSBte85/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]-->

Silahkan sobat ganti yang berwarna merah dengan URL Background lainnya atau dengan Warna terserah sobat, sobat bisa kresikan sendiri.

• Klik simpan, nah setelah disimpan kamu Pilih Add Gadget HTML Java Script dan Copy kode dibawah ini.

<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>

Silahkan Sobat ganti kata Sample Menu dengan Nama, dan tanda # dengan Link URL tujuan.
Nah selsai deh cara membuatnya, gimana mudahkan cara membuatnya.

Posted by sae on - Rating: 4.5

Title : Cara Membuat Menu Horizontal Drop Down Versi 2
Description : Hai sob kali ini saya akan menulis tentang bagaimana cara membuat menu horizontal di blog.  sobat pingin tahu cara membuatnya dan ingin mem...

Share to

Facebook Google+ Twitter