Drop Down Menu 2 Level

Untuk membuat menu drop down seperti di blog saya, saya menggunakan kode HTML dan kode CSS agar tampilan drop down menunya menjadi menarik. Untuk membuatnya drop down seperti ini silahkan ikuti langkah-langkah dibawah ini (khusus untuk template minima yang baru) :

<!-- Dropdown menu Start --> <br /> <br /> <div id="menu"> <br /> <br /> <ul class="level1"> <br /> <br /> <li class="level1-li"><a class="level1-a" href="http://vaniaangelina525060003.blogspot.com/">Home</a></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">Contact Me<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a href="https://login.yahoo.com/config/login_verify2?&.src=ym">Email</a></li> <br /> <br /> </ul> <br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">FAQ'S<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a class="fly" href="#url">DROP DOWN MENU<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://kolom-tutorial.blogspot.com/2007/06/menu-dropdown-dengan-javascript.html">JAVA</a></li> <br /> <br /> <li><a href="http://bloggersentral.blogspot.com/2009/10/installing-multi-level-css-dropdown.html">CSS</a></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">MY COMMUNNITY<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a href="#url">FORUM</a></li> <br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://sharecommunity.prophpbb.com/">SHARE COMMUNITY</a></li> <br /> <br /> <li><a href="http://budayaindonesia.prophpbb.com/">BUDAYA INDONESIA</a></li> <br /> <br /> </ul><br /> <br /> <li><a href="#url">GROUP</a></li><br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://www.facebook.com/photo.php?pid=30656847&id=1147392995#/group.php?gid=111077538683">ELECTRICAL ENGINEERING</a></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> <br /> </ul></li></ul></div> <br /> <br /> <!-- BloggerSentral.blogspot.com --> <br /> <br /> <!-- Dropdown menu End -->

1. Copy paste kode HTML di samping pada HTML/Javascript gadget. Simpan kode yang telah dibuat.

/* ================================================================ <br /> <br /> This copyright notice must be kept untouched in the stylesheet at all times. The original <br /> <br /> version of this stylesheet and the associated (x)html is available at <br /> <br /> http://www.cssplay.co.uk/menus/anywidth2.html <br /> <br /> Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated <br /> <br /> (x)html may be modified in any way to fit your requirements. <br /> <br /> =================================================================== */ <br /> <br /> #menu {width:1000px; background: #3aa3d3; height:20px;; text-align:left; position:relative; <br /> <br /> z-index:500;} <br /> <br /> #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} <br /> <br /> #menu ul {display:inline-block;} <br /> <br /> #menu li {margin:0; padding:0; list-style:none;} <br /> <br /> #menu li {display:inline-block; display:inline;} <br /> <br /> #menu ul ul {position:absolute; left:-9999px;} <br /> <br /> #menu ul.level1 {margin:0 auto; background:#710;} <br /> <br /> #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} <br /> <br /> #menu ul.level1 {background:#3aa3d3;} <br /> <br /> #menu ul.level2 {background:#ae4621;} <br /> <br /> #menu ul.level3 {background:#c98b14;} <br /> <br /> #menu ul.level4 {background:#9f690e;} <br /> <br /> #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows <br /> <br /> why --*/ <br /> <br /> #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; <br /> <br /> line-height:25px; text-decoration:none;padding:0 20px 0 10px;} <br /> <br /> #menu ul.level1 li.level1-li a.level1-a {float:left;} <br /> <br /> #menu ul li:hover > ul {visibility:visible; left:0; top:25px;} <br /> <br /> #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;} <br /> <br /> #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;} <br /> <br /> #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; <br /> <br /> margin-top:-25px;} <br /> <br /> #menu a:hover ul {left:0; top:23px;} <br /> <br /> #menu li.left a:hover ul {left:auto; right:-1px; top:23px;} <br /> <br /> #menu li.left ul a {text-align:right; padding:0 10px 0 20px;} <br /> <br /> #menu a:hover a:hover ul, <br /> <br /> #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;} <br /> <br /> #menu li.left a:hover a:hover ul, <br /> <br /> #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} <br /> <br /> #menu a:hover ul ul, <br /> <br /> #menu a:hover a:hover ul ul {left:-9999px;} <br /> <br /> #menu li.left a:hover ul ul, <br /> <br /> #menu li.left a:hover a:hover ul ul {left:-9999px;} <br /> <br /> #menu li a.fly {font-variant: small-caps;} <br /> <br /> #menu li.left ul a.fly {font-variant: small-caps;} <br /> <br /> #menu li a:hover, <br /> <br /> #menu li a.fly:hover {background-color:#555555;} <br /> <br /> #menu li:hover > a, <br /> <br /> #menu ul li:hover > a.fly {background-color:#555555;} <br /> <br /> #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; <br /> <br /> margin-top:-4px;} <br /> <br /> #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; <br /> <br /> margin-top:-29px;} <br /> <br /> #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; <br /> <br /> border-collapse:collapse; margin-top:-4px;} <br /> <br /> #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; <br /> <br /> border-collapse:collapse; margin-top:-29px;} <br />

2.Langkah selanjutnya copy dan paste kode CSS di samping sebelum ]]></b:skin> di kode template.