Cara Membuat Menu Drop Bar Dengan CSS

Cara membuat menu Drop Down  dengan CSS:
Ikuti cara berikut ini:





1. Sign in di akun blogger.com Sobat

2. Pilih blog yang mau di terapkan menu ini

3. Pilih menu >> Template (tampilan blogger diperbaharui) lalu >>Edit HTML;

4. Beri tanda centang pada tulisan >>Expand Template Widget;

5. Carilah kode yang kurang lebih seperti berikut ini ( gunakan ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Lalu pastekan Code berikut ini di atas code tersebut:

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglntiVgvjXYVdHojBNA9xpRsctl0Z8CI3EKME2cRxlb1PhtiN0tkQRys346C48LfxPzosIWvZNGTmZMGkDFRu55odwTAgqZ_vLXwtap4773vSGnOsQivlazvSEBH-GkrNQC9YKs7Dszq2Q/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/AVvXsEglntiVgvjXYVdHojBNA9xpRsctl0Z8CI3EKME2cRxlb1PhtiN0tkQRys346C48LfxPzosIWvZNGTmZMGkDFRu55odwTAgqZ_vLXwtap4773vSGnOsQivlazvSEBH-GkrNQC9YKs7Dszq2Q/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/AVvXsEjEllGRhPL2ETO_2-buWS0r9xJ_-SMRbPO32wH14j5Y2zOMfqOiKhbTecq3oVLdThFlqwyyBy8j2TQHZ8en-Tu2FikSjmcoXhRKD-PI1mtitoAjzgZf0LJuds8YnM35-82QdkGl5XNRqa8t/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/AVvXsEjEllGRhPL2ETO_2-buWS0r9xJ_-SMRbPO32wH14j5Y2zOMfqOiKhbTecq3oVLdThFlqwyyBy8j2TQHZ8en-Tu2FikSjmcoXhRKD-PI1mtitoAjzgZf0LJuds8YnM35-82QdkGl5XNRqa8t/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/AVvXsEjG12i7OoM67Eul_PztdTEVmo5CQ6UTTU-vjwc8Ysvvqyn9ufco7gJZU2xBsiPO7QBrdhvXFFKesKjQ2GbJnBKCxH2OsaMzNZ7xNlQGvVqdKGAnvt0SxtsJBqciEljKfxwhABr8-jXRk9nc/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;
}

Setelah itu >> Simpan Template, dan tutup Edit Template.
Kemudian klik : Tata Letak >> Tambah Gadget/Add Gadget >> HTML/JavaScript, lalu pastekan code berikut:

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Home</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Menu 1</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 1 a</a></li>
<li><a href="#">Sub Menu 1 b</a></li>
<li><a href="#">Sub Menu 1 c</a></li>
<li><a href="#">Sub Menu 1 d</a></li>
<li><a href="#">Sub Menu 1 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 2</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 2 a</a></li>
<li><a href="#">Sub Menu 2 b</a></li>
<li><a href="#">Sub Menu 2 c</a></li>
<li><a href="#">Sub Menu 2 d</a></li>
<li><a href="#">Sub Menu 2 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 3</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 3 a</a></li>
<li><a href="#">Sub Menu 3 b</a></li>
<li><a href="#">Sub Menu 3 c</a></li>
<li><a href="#">Sub Menu 3 d</a></li>
<li><a href="#">Sub Menu 3 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 4</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 4 a</a></li>
<li><a href="#">Sub Menu 4 b</a></li>
<li><a href="#">Sub Menu 4 c</a></li>
<li><a href="#">Sub Menu 4 d</a></li>
<li><a href="#">Sub Menu 4 e</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />
Ket: ganti tulisan Menu 1-Menu 4 dan Sub Menu dengan Nama Menu yg sobat kehendaki
"#" ganti dengan URL blog sobat.
Letakan gadget nya di atas atau di bawah Header Blog....dan SELESAI.

Anda sedang membaca artikel tentang Cara Membuat Menu Drop Bar Dengan CSS dan Anda bisa menemukan artikel Cara Membuat Menu Drop Bar Dengan CSS ini dengan url http://dyenps-cabangsipon.blogspot.com/2012/08/cara-membuat-menu-drop-bar-dengan-css.html sobat boleh menyebarluaskannya atau mengcopy paste-nya jika artikel Cara Membuat Menu Drop Bar Dengan CSS ini bermanfaat bagi Anda,namun jangan lupa untuk meletakkan link ini sebagai sumbernya:<a href="http://dyenps-cabangsipon.blogspot.com/2012/08/cara-membuat-menu-drop-bar-dengan-css.html">Cara Membuat Menu Drop Bar Dengan CSS</a>

Artikel Terkait:

Posted in: Tutorial Blogger