Membuat Tab Menu Horizontal Dengan Sub Menu

Membuat tab menu horizontal bisa dikatakan juga dropdown menu horizontal. Apa yang dimaksud tab menu horizontal dengan sub menu, yaitu tab menu horizontal yang apabila disorot salah satu menunya akan ada sub menu menurun kebawah. kebanyakan template sudah menyertakan tab menu horizontal tapi tidak semua disertai fungsi sub menu.

Sub menu sendiri berfungsi untuk mempertegas salah satu menu tersebut. misalnya dalam satu menu berjudul sport, maka sub menunya bisa berisi dari macam-macam olahraga semisal sepakbola,motogp,tinju,tennis dan masih banyak lagi. contohnya bisa dilihat disini atau lihat gambar di bawah ini.

 

Cara membuatnya silahkan ikuti langkah langkah di bawah ini:

1. Login ke blogger
2. Klik rancangan kemudiat edit html
3. Cari kode </head>
4. Copy dan paste kode dibawah ini sebelum atau diatas kode </head> kemudian simpan template

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRekepWmT9GCDM_Au6UpRzV6884ucHbLYPrmrYU622gVNM0GT8V4baqlTQdiDtj0mkA3ly_guLyKfaxXHYUHHE3pxTx5ncOe_6aqCoyK-_KyHNPHMetbA2oNVzOUEiXOjPmr0O92iFc_Y/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4N8Zo4bbSNn_SUq662fgIZw7AgCoSR2Mc47m-GSgKPcbunkv3g8QZtxGfSQbFkMlpGhnIkyTGkQT5gNBkNhUQ3c9vTiQw_oyPSru1LnaGxXb2R2h8__4yLtSuUCZlPfdjhPRCD8F1kMVt/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRekepWmT9GCDM_Au6UpRzV6884ucHbLYPrmrYU622gVNM0GT8V4baqlTQdiDtj0mkA3ly_guLyKfaxXHYUHHE3pxTx5ncOe_6aqCoyK-_KyHNPHMetbA2oNVzOUEiXOjPmr0O92iFc_Y/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4N8Zo4bbSNn_SUq662fgIZw7AgCoSR2Mc47m-GSgKPcbunkv3g8QZtxGfSQbFkMlpGhnIkyTGkQT5gNBkNhUQ3c9vTiQw_oyPSru1LnaGxXb2R2h8__4yLtSuUCZlPfdjhPRCD8F1kMVt/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

5.  Kembali lagi ke rancangan kemudian page html dan klik "Add a gadget"
6. Setelah terbuka pilih  "html/java script" dan pastekan kode di bawah ini

<div id="foxmenucontainer">
<div id="menu">
<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#" title="#">Subscribe</a></li>
<li><a href="#" title="#">Register</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
</div>
</div>

7. Simpan dan lihat hasilnya

 apabila ada pertanyaan silahkan tinggalkan di dalam kotak komentar di bawah

Ayo dukung terus kontes SEO Terbaru yang bertema "javahostindo web hosting indonesia" dengan mengikuti link berikut ini |javahostindo web hosting indonesia | Dapatkan update terbaru dari blog ini dengan mengetikkan email anda di kotak berikut ini. Setiap blog ini mengeluarkan postingan akan otomatis masuk ke email yang anda masukkan: