Cara Membuat Menu Drop Down Multi Sub Menu Dengan CSS

Langkah langkahnya :
1. Login ke Blog Sobat
2. Pilih Tata Letak
3. Pilih Tambah Gadget >> HTML/javascript
4. Copy kode CSS dibawah ini.
5. Edit menu-menunya dan ganti alamat URL nya
6. Lalu Simpan dan letakkan dibagian atas blog kamu

<style type="text/css"> /* ======================= Original : www.stunicholls.com Styler by: cuerosbhelatos.blogspot.com Template Bawaan blogger kagak mau Nyuport Salam hangat & Happy Blogging ======================== */ #nav, #nav {padding: 0 2px; margin:0 10px; list-style:none; font: 16px Comic Sans MS; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; border:4px inset white;background:-moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:200;} #nav {height:35px;} #nav ul {padding: 5px 2px; margin:10px 0; list-style:none; font: 12px Comic Sans MS; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; border:2px inset white;background:-moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));} #nav li {float:left;} #nav li li {float:none;} /* a hack for IE5.x and IE6 */ * html #nav li li {float:left;} #nav li a {display:block; float:left; color:#fff; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;} #nav li li a {height:20px; line-height:20px; float:none;} #nav li:hover {position:relative; z-index:300;} #nav li:hover ul {left:0; top:22px;} /* another hack for IE5.5 and IE6 */ * html #nav li:hover ul {left:10px;} #nav ul {position:absolute; left:-9999px; top:-9999px;} /* yet another hack for IE5.x and IE6 */ * html #nav ul {width:1px;} /* it could have been this simple if all browsers understood */ /* show next level */ #nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;} /* keep further levels hidden */ #nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;} /* show path followed */ #nav li:hover > a {text-decoration:none; color:#b75;} /* but IE5.x and IE6 need this lot to style the flyouts and path followed */ /* show next level */ #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:-15px; margin-left:100%; top:-1px;} /* keep further levels hidden */ #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px;} /* show path followed */ #nav li:hover a, #nav li:hover li:hover a, #nav li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover li:hover a {text-decoration:none; color:#b75;} /* hide futher possible paths */ #nav li:hover li a, #nav li:hover li:hover li a, #nav li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li:hover li a {text-decoration:none; color:#fff;} #nav a:hover{transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background:red; border-color: #fff; border-style: inset; border-width: 2px 4px; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;font-size: 20px;font-family:Verdana;} #nav ul a:hover{transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg); -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background:red; border-color: #fff; border-style: inset; border-width: 2px 4px; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;font-size: 30px;font-family:Verdana;} </style> <ul id="nav"> <li><a href="http://www.blogger.com">Home</a></li> <li><a href="http://www.blogger.com">About us »</a> <ul> <li><a href="http://www.blogger.com">Who we are</a></li> <li><a href="http://www.blogger.com">What we do</a></li> <li><a href="http://www.blogger.com">Where to find us</a></li> </ul> </li> <li><a href="http://www.blogger.com">Products »</a> <ul> <li><a href="http://www.blogger.com">Tripods »</a> <ul> <li><a href="http://www.blogger.com">Monopods</a></li> <li><a href="http://www.blogger.com">Tripods</a></li> <li><a href="http://www.blogger.com">Adjutable head</a></li> <li><a href="http://www.blogger.com">Fixed</a></li> <li><a href="http://www.blogger.com">Flash mount</a></li> <li><a href="http://www.blogger.com">Floating head</a></li> </ul> </li> <li><a href="http://www.blogger.com">Films »</a> <ul> <li><a href="http://www.blogger.com">35mm</a></li> <li><a href="http://www.blogger.com">Color Print</a></li> <li><a href="http://www.blogger.com">Black and White</a></li> <li><a href="http://www.blogger.com">Roll</a></li> <li><a href="http://www.blogger.com">Color Slide</a></li> </ul> </li> <li><a href="http://www.blogger.com">Cameras »</a> <ul> <li><a href="http://www.blogger.com">Compact »</a> <ul> <li><a href="http://www.blogger.com">Canon</a></li> <li><a href="http://www.blogger.com">Nikon</a></li> <li><a href="http://www.blogger.com">Minolta</a></li> <li><a href="http://www.blogger.com">Pentax</a></li> </ul> </li> <li><a href="http://www.blogger.com">Digital »</a> <ul> <li><a href="http://www.blogger.com">Canon</a></li> <li><a href="http://www.blogger.com">Nikon »</a> <ul> <li><a href="http://www.blogger.com">Lenses »</a> <ul> <li><a href="http://www.blogger.com">Standard</a></li> <li><a href="http://www.blogger.com">Telephoto</a></li> <li><a href="http://www.blogger.com">Wide Angle</a></li> <li><a href="http://www.blogger.com">Fish Eye</a></li> <li><a href="http://www.blogger.com">Mirror</a></li> <li><a href="http://www.blogger.com">Macro</a></li> </ul> </li> <li><a href="http://www.blogger.com">Speedlight</a></li> <li><a href="http://www.blogger.com">Coolpix »</a> <ul> <li><a href="http://www.blogger.com">Coolpix S10</a></li> <li><a href="http://www.blogger.com">Coolpix L2</a></li> <li><a href="http://www.blogger.com">Coolpix S500</a></li> <li><a href="http://www.blogger.com">Coolpix P5000</a></li> <li><a href="http://www.blogger.com">Coolpix 4600</a></li> <li><a href="http://www.blogger.com">Coolpix S6 Silver</a></li> </ul> </li> <li><a href="http://www.blogger.com">D200</a></li> <li><a href="http://www.blogger.com">D80</a></li> </ul> </li> <li><a href="http://www.blogger.com">Minolta</a></li> <li><a href="http://www.blogger.com">Pentax</a></li> </ul> </li> <li><a href="http://www.blogger.com">SeLLeR »</a> <ul> <li><a href="http://www.blogger.com">Canon</a></li> <li><a href="http://www.blogger.com">Nikon</a></li> <li><a href="http://www.blogger.com">Minolta</a></li> <li><a href="http://www.blogger.com">Pentax</a></li> <li><a href="http://www.blogger.com">Panasonic</a></li> </ul> </li> </ul> </li> <li><a href="http://www.blogger.com">Flash</a></li> <li><a href="http://www.blogger.com">Video</a></li> </ul> </li> <li><a href="http://www.blogger.com">FAQs »</a> <ul> <li><a href="http://www.blogger.com">Cameras</a></li> <li><a href="http://www.blogger.com">Film types</a></li> <li><a href="http://www.blogger.com">Digital Photography</a></li> </ul> </li> <li><a href="http://www.blogger.com">Privacy »</a> <ul> <li><a href="http://www.blogger.com">Privacy Policy</a></li> <li><a href="http://www.blogger.com">Privacy Statement</a></li> </ul> </li> <li><a href="http://www.blogger.com">Contact us</a></li> </ul>

sumber : http://davidchielietonga06.blogspot.com

Share on Google Plus

About Dadan Pauzan

Kami merupakan salah satu komunitas yang hobi menulis artikel di blog, main game, ngoding, edit musik dan membuat video.