Cara membuat menu navigasi horizontal dropdown

Setelah mencari berbagai referensi dari para blogger tentang cara membuat menu navigasi horisontal dropdown maka saya temukan cara seperti di bawah ini. Menurut saya Cara ini merupakan cara simple dari beberapa cara.

Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut: 
1. Login ke akun blogger

Pilih Dashboard - Tata letak (Rancangan) - Edit HTML

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Arial", Arial;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

font-size:14px;

font-weight:bold;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

3.Cari kode </header> kemudian letakan dibawah ini tepat bawah kode </header>

<div class='menu'>
<ul>
<li><a href='http://klikblogaku.blogspot.com/2011/03/daftar-isi.html'>Beranda</a></li>

<li><a href='#'>Souce Code</a>
<ul>
<li><a href='http://klikblogaku.blogspot.com/2011/03/source-code.html'>C++</a></li>
</ul></li>

<li><a href='http://klikblogaku.blogspot.com/2011/03/daftar-isi.html'>Daftar Isi</a></li>

</ul>
</div>

ganti http://klikblogaku.blogspot.com/2011/03/daftar-isi.html dengan mana blog anda.

jika ingin menambah menu bercabang, tambahkan kode :  

 <li><a href='#'>Souce Code</a>
<ul>
<li><a href='http://klikblogaku.blogspot.com/2011/03/source-code.html'>C++</a></li>
</ul></li>

untuk menu tidak bercabang, tambahkan kode :   

<li><a href='http://klikblogaku.blogspot.com/2011/03/source-code.html'>C++</a></li> 

• Tweet
• Share
• Share