Cara Membuat Menu Horizontal Drop Down Versi 2

Cara Membuat Menu Horizontal Drop Down Versi 2 - Sudah lama yah saya ga menerbitkan Artikel Tutorial Blog, nah kali ini saya akan menjelaskan bagaimana Cara Membuat Menu Horizontal Drop Down Versi 2, Menu Horizontal Versi 2 ini agak mirip dengan Kompas.com.

Gimana sob udah lihat gambar diatas, jika sobat pingin tahu cara membuatnya dan ingin memasangkan nya di Blog sobat silahkan ikuti langkah-langkah di bawah ini.

• 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/AVvXsEh-4wjXQhBtZnSXxICdGDfh1XBN-XaG0WHZqRqfmraeJwMgXSNypWIoKNqMfAE3j2KIEmvPRC3zP9JTpDGPYm0mA63ENTBHdJzVV0CtnVwGP6UHLML-W30XQPYYdiETuL9ZPqpyxVCPkI2-/) 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/AVvXsEhFHfI60KK1gSnGc1T375zC02HEgJXziidPvdG0i6VSMmgQ_ZUCmRs4QUZoHoV1PeHPoBFpaCT_Kfsgy_7UpUMDVlNYQ6QPuVwnao2jH-Z8Ou3i8FaaFFZ93xLroOA0nxJfaGs0yda_8dT8/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/AVvXsEhWbj6fYrg7bRVWsiKQ1q7HD52eS8sLN-NhJyH7SkNWUtEtuPyZ6lngV-8cBGG1w8C9mouaefbikKmYF5aLHfIK7Wz3QM3ePAhbcOll5VljgGafbv_D1WsogbYL9cX-sL9b2x7kkrt4zwrO/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/AVvXsEhWbj6fYrg7bRVWsiKQ1q7HD52eS8sLN-NhJyH7SkNWUtEtuPyZ6lngV-8cBGG1w8C9mouaefbikKmYF5aLHfIK7Wz3QM3ePAhbcOll5VljgGafbv_D1WsogbYL9cX-sL9b2x7kkrt4zwrO/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/AVvXsEhuMo71i2EwxKQjIVIElTUT_h3iQvOWjqPc4jTUmG01hkHHRMyYadHaQeWavGC3Dn7bmK7g8yPMCocxCCqAGC7SuRcuWT__rgPmw9q0Uid8G2y7ffYeZNdEviI37cIQj7c-WoUoiE80tB8I/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.
dikutip dari: http://blazerracing.blogspot.com/2012/02/cara-membuat-menu-horizontal-drop-down_19.html