cara memasang menu drop down

Langkah :

Buka akun Blogger Anda
Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
Cari kode dibawah ini :

</head>

4. Pastekan kode dibawah ini, diatas pada kode diatas :

<style>
#menu { background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba);
height:35px;; text-align:center; position:fixed; z-index:20; right: 0%; left: 0%;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu ul.level2 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level3 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level4 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 14px Arial; color:#fff; line-height:35px; text-decoration:none;padding:0px 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:35px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:30px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:30px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu li:hover > a,
#menu ul li:hover > a.fly {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/
</style>

5. Cari kode dibawah ini :

<div id='header-wrapper'>

Keterangan :

Jika kode diatas tidak ada, save lagkah 4 dan masuk ke menu layout > add gadget > HTML/Javascript dan pastekan kode dibawah ini (juga pada langkah 5 save kode dibawah ini) :

<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="###########">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="###########">Contact Us</a>

<ul class="level2">
<li><a href="###########">Email</a></li>
<li><a href="###########">Telephone</a></li>
<li><a href="###########">Online Form</a></li>
<li><a href="###########">Snail Mail Address</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a fly" href="###########">Resort</a>

<ul class="level2">
<li><a href="###########">Ski Hire Facilities</a></li>
<li><a class="fly" href="###########">Main Ski Slopes</a>

<ul class="level3">
<li><a href="###########">Beginners Slopes</a></li>
<li><a href="###########">Intermediate Slopes</a></li>
<li><a class="fly" href="###########">Advanced Skill Levels</a>

<ul class="level4">
<li><a href="###########">Local</a></li>
<li><a href="###########">Nearby</a></li>
<li><a href="###########">With instructor</a></li>
<li><a href="###########">Snow boarding</a></li>
</ul>
</li>
<li><a href="###########">Expert</a></li>
</ul>
</li>
<li><a href="###########">Night Life</a></li>
<li><a class="fly" href="###########">Restaurants</a>

<ul class="level3">
<li><a href="###########">Snow Hotel</a></li>
<li><a href="###########">The Snowman</a></li>
<li><a href="###########">Ice Cavern</a></li>
<li><a href="###########">Ski Inn</a></li>
</ul>
</li>
<li><a class="fly" href="###########">Car Hire</a>

<ul class="level3">
<li><a href="###########">From Airport</a></li>
<li><a href="###########">In Resort</a></li>
<li><a href="###########">Multiple Resorts</a></li>
</ul>
</li>
</ul>
</li>
<li class="level1-li"><a class="level1-a fly" href="###########">Surrounding Area</a>

<ul class="level2">
<li><a href="###########">Where to go</a></li>
<li><a href="###########">What to do</a></li>
<li><a href="###########">Places of interest</a></li>
<li><a href="###########">National parks & Museums</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="###########">Privacy</a></li>
<li class="level1-li"><a class="level1-a" href="###########">About Us</a></li>
<li class="level1-li"><a class="level1-a" href="###########">Contact Us</a></li>
<li class="level1-li"><a class="level1-a" href="###########">SiteMap</a></li>
<li class="level1-li"><a class="level1-a" href="###########">Official Website</a></li>
<li class="level1-li left"><a class="level1-a fly" href="###########">Information</a>

<ul class="level2">
<li><a href="###########">Money Exchange</a></li>
<li><a class="fly" href="###########">Resort Essential Information</a>

<ul class="level3">
<li><a href="###########">Lift Passes</a></li>
<li><a href="###########">Insurance</a></li>
<li><a class="fly" href="###########">Gear Rental</a>

<ul class="level4">
<li><a href="###########">Boots</a></li>
<li><a href="###########">Skis</a></li>
<li><a href="###########">Ski Wear</a></li>
<li><a href="###########">Goggles</a></li>
</ul>
</li>
<li><a href="###########">Ski Schools</a></li>
<li><a href="###########">Snow Report</a></li>
</ul>
</li>
<li><a class="fly" href="###########">Language</a>

<ul class="level3">
<li><a href="###########">Austrian</a></li>
<li><a href="###########">German</a></li>
<li><a href="###########">French</a></li>
<li><a href="###########">English</a></li>
</ul>
</li>
<li><a href="###########">Short Breaks</a></li>
</ul>
</li>
</ul>
</div>

6. Ganti kode yang berwarna merah dengan URL dan judul yang Anda inginkan.

Skill :

~~Pemula~~
Menengah
Proffesional

Jika Anda bingun dengan kode-kode diatas Anda dapat berkomentar tau menghubungi saya lewat email Setiap Blogger bertanggung jawab atas apa yang dia tulis.

Terima kasih, semoga bermanfaat.

Rate this posting:

{[['

']]}