Cara Membuat Menu Drop Down Multi Sub Menu Dengan CSS

Sabtu, 23 Juni 2012

Tampilannya akan seperti dibawah ini. Kalau berminat, silahkan d coba hehee.

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>