Cara Membuat Menu Dropdown Horizontal

Cara Membuat Menu Dropdown Horizontal

Sebelum memulai, sobat bisa melihat contoh Menu di blog saya ini yang paling atas,

Selanjutnya,

Login ke Dashbord Blog sobat,

Pilih Templete untuk mengakses halaman Edit HTML,

Jangan lupa untuk Download Lengkap Template terlebih dahulu,

Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode,

Jika kode sudah ketemu,Copy kode berikut dan letakan diatas kode ]]></b:skin> ,

/*Menu Dropdown Horyzontal - onlinebisnis11.blogspot.com*/

#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sR-s2zlhVJRYb7sPlA9NSb0cmfGjjD_cjA0alHWFQafGHUoeNkIrDtC8fGvrtZmqPBFib_6INguBKw7JPqChW2lCPDWg9TRt6LY5orrIPf5-Fc6LPxJ0eKS_ko7wN9-nsLuuvbK7OgGp/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}

#topbar{width:980px;height:40px;margin:0 auto}

#top{width:100%}

#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}

#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}

#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomVeKIByNGj5k_fxdO6Aarn9Ftzc4mInsfyqtKjmxouVZYNGGSa-J8zFH820NoHXeqEqdY3yABZXG7yqXQlfmRx1X-wPCxOqu85m2xcznOfcxOo4ZruMn_AGLyPQNDN7cLtLy7c2IbRc/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}

#top li{float:left;position:static;width:auto}

#top li ul,#top ul li{width:170px}

#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}

#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}

#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}

#top li:hover ul,#top li.hvr ul{display:block}

#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}

#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}

#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}

#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-block}

#inner{padding-top:40px;}

#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}

#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}

* html, * html body{overflow-y:hidden;height:100%;}

* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }

* html #fixedinner{margin-right:17px;}

* html #fixed {position:absolute;}

Kode warna biru bisa di ganti sesuai keinginan sobat,

Langkah selanjutnya kode berikut :

<div id='header-wrapper'>

kalau tidak ketemu, bisa pakai kode ini

<div class='header-outer'>

Kalau sudah ketemu ,copy dan pastekan kode berikut tepat di bawah salah satu kode di atas :

<div id='fixed'>

<div id='fixedinner'>

<div id='top-wrapper'>

<div id='topbar'>

<ul id='top'>

<li><a href='/'><span>Welcome</span>Homepage</a></li>

<li><a href='#'><span>Disini</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>

<ul>

<li><a href='#'>Sub menu 1</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 2</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 3</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 4</a></li>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>

<ul>

<li><a href='#'>Sub menu 1</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 2</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 3</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 4</a></li>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>

<ul>

<li><a href='#'>Sub menu 1</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 2</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 3</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 4</a></li>

<li class='hr'/>

<li><a href='#'>Sub menu 5</a></li>

</ul>

</li>

</ul>

<br class='clearit'/>

</div>

<div style='clear:both;'/>

</div>

</div></div>

Kode warna biru diata bisa di ganti sesuai kebutuhan sobat.

Kemudian Simpan Template.

Selesai dan Lihat hasilnya.

Jangan lupa baca yang lainnya Tentang Seo Analyser dan Tentang Layanan Validator W3C agar blog sobat jadi sempurna

Begitulah Cara Membuat Menu Dropdown Horizontal

Terakhir,terima kasih.

Ditulis Oleh : Master Online | Prediksi Online Terbaru Hongkong Singapura

Artikel Cara Membuat Menu Dropdown Horizontal ini ditulis oleh Master Online pada hari ini. Terimakasih atas kunjungan agan pada blog ini. Kritik dan saran tentang Cara Membuat Menu Dropdown Horizontal dapat agan sampaikan melalui kotak komentar dibawah ini. Bagi agan semua yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya <a href="http://onlinebisnis11.blogspot.com/2013/02/cara-membuat-menu-dropdown-horizontal.html" target="_blank">Cara Membuat Menu Dropdown Horizontal</a>

Artikel terkait :