Membuat Menu Drop Down Horisontal Dengan Code CSS dan Html

Lama juga gak update blog ( kehabisan ide buat nulis,hikssss.... )
Kali ini saya akan membahas tentang membuat menu drop down horisontal menggunakan code css dan html, ok langsung saja kita bahas cara nya

Pilihan menu drop down :

1. Massive Blue Drop Down Menu

Kode html nya
<div class="menu"><br /> <ul> <li><a href="#" >Home</a></li> <li><a href="#" id="current">Products</a><br /> <br /> <ul> <li><a href="#">Drop Down CSS Menus</a></li> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Dreamweaver Menus</a></li> </ul><br /> </li> <li><a href="/faq.php">FAQ</a><br /> <br /> <ul> <li><a href="#">Drop Down CSS Menus</a></li> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Dreamweaver Menus</a></li> </ul><br /> </li> <li><a href="/contact/contact.php">Contact</a></li> </ul><br /> </div>

Kode Css nya
.menu{<br /> <br /> border:none;<br /> <br /> border:0px;<br /> <br /> margin:0px;<br /> <br /> padding:0px;<br /> <br /> font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;<br /> <br /> font-size:14px;<br /> <br /> font-weight:bold;<br /> <br /> }<br /> <br /> .menu ul{<br /> <br /> background:#333333;<br /> <br /> height:35px;<br /> <br /> list-style:none;<br /> <br /> margin:0;<br /> <br /> padding:0;<br /> <br /> }<br /> <br /> .menu li{<br /> <br /> float:left;<br /> <br /> padding:0px;<br /> <br /> }<br /> <br /> .menu li a{<br /> <br /> background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1qPtNRjLLyxaScMJ6OkixaMf33-VzhKcYDwMVBAmoPneQgdDRAHRyj64MM2YqcV2YrC7Nm_34IOSTgZspmW21NdrlZqg2qpRZRkgKkILlIINqbUbZFKgICTZd5Ea6IQaAcUOVHwmtvsF/s1600/seperator.gif") bottom right no-repeat;<br /> <br /> color:#cccccc;<br /> <br /> display:block;<br /> <br /> font-weight:normal;<br /> <br /> line-height:35px;<br /> <br /> margin:0px;<br /> <br /> padding:0px 25px;<br /> <br /> text-align:center;<br /> <br /> text-decoration:none;<br /> <br /> }<br /> <br /> .menu li a:hover, .menu ul li:hover a{<br /> <br /> background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgolHxs6tqT_TuCCxE8PA2If5z-oH-TJsDVyESuq24Fo_eAl9-gbbVRHxwu0kwoh8LjE4aHkzzczSAy_hYnPuL8PASJVKBfUjafUXvqokz4_jf7eH17AeVO7asO355dRDiQQgFX-FULUZ66/s1600/hover.gif") bottom center no-repeat;<br /> <br /> color:#FFFFFF;<br /> <br /> text-decoration:none;<br /> <br /> }<br /> <br /> .menu li ul{<br /> <br /> background:#333333;<br /> <br /> display:none;<br /> <br /> height:auto;<br /> <br /> padding:0px;<br /> <br /> margin:0px;<br /> <br /> border:0px;<br /> <br /> position:absolute;<br /> <br /> width:225px;<br /> <br /> z-index:200;<br /> <br /> /*top:1em;<br /> <br /> /*left:0;*/<br /> <br /> }<br /> <br /> .menu li:hover ul{<br /> <br /> display:block;<br /> <br /> <br /> <br /> }<br /> <br /> .menu li li {<br /> <br /> background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2K7_jERzNJ5uRBtkh_f5iMASRYecbA4e_LPdfhmQBcs3d5I2l41qcLDhhALSBzgHBAhvlSY7HGKTnXJ8fbTpLIcO8rVwo_5gV8mgk5iUVCiEzrAzFFqGk1lxUV3Pmzyx4K-OAQ6d_pMbr/s1600/sub_sep.gif') bottom left no-repeat;<br /> <br /> display:block;<br /> <br /> float:none;<br /> <br /> margin:0px;<br /> <br /> padding:0px;<br /> <br /> width:225px;<br /> <br /> }<br /> <br /> .menu li:hover li a{<br /> <br /> background:none;<br /> <br /> <br /> <br /> }<br /> <br /> .menu li ul a{<br /> <br /> display:block;<br /> <br /> height:35px;<br /> <br /> font-size:12px;<br /> <br /> font-style:normal;<br /> <br /> margin:0px;<br /> <br /> padding:0px 10px 0px 15px;<br /> <br /> text-align:left;<br /> <br /> }<br /> <br /> .menu li ul a:hover, .menu li ul li:hover a{<br /> <br /> background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq-hd_Z61Kb4K6uGNeC98U_lNSCzTN0KEEWq3j6RFtthDXfjE6mPmpiLWWnR12sN-oYCyBD87ClPBct_JDqxnwG7Z_PL9aLvl4zFhSyUzk0dm7ggFEkwdH6KnIJTsOegcysHh2ZLV1MZBa/s1600/hover_sub.gif') center left no-repeat;<br /> <br /> border:0px;<br /> <br /> color:#ffffff;<br /> <br /> text-decoration:none;<br /> <br /> }<br /> <br /> .menu p{<br /> <br /> clear:left;<br /> <br /> }

2. Sunrise Gloss Drop Down Menu

Kode Html nya
<div class="nav-container-outer"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8LanCuVmBhklqmFipFXtUMJ-UMRw5P3qd08h_b4i95nnYtM6F_gbL5goF6t-F1NIHEF0dU2Lh4fmKuE5u1afMssmzat5clRsQVaWxOZ7FwGRvwCU99A3jXpz3-dOr2Ras9Ld0tu88p3B/s1600/nav-bg-l.jpg" alt="" class="float-left" /><br /> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4TRRICdkl0EC7G5fnDm42aqgHhWTLbKVG-19Ejov-_YbUp3bbOb5kL3Y7ZaGC193H-7hIIGJvqEi_OiqGuxIIwBvBqfM9HSkhwun9CSDzUd_y0b6TOBV4bDMr11KuyFe_RyMAY4VR8lQ/s1600/nav-bg-r.jpg" alt="" class="float-right" /><br /> <br /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#">HOME</a><br /> <br /> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Products</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Quality</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Services</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Very Long Item</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Fully Flexible</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li class="clear"> </li></ul><br /> </div>

Kode CSS nya
@charset "utf-8";<br /> <br /> /* CSS Document */<br /> <br /> <br /> <br /> body{<br /> <br /> padding: 25px;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Navigation Structure ^'^*/<br /> <br /> .nav-container-outer{<br /> <br /> background: #990000;<br /> <br /> padding: 0px;<br /> <br /> height: 74px;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2I0i_W9oe8kGRFFolkQdUBimJvuapYZxY3x5yVDO6FEPIF2cE5zIvOHWnKnI6PdQbvRm4y-2lGiPexePG92pMxfk32aFNL9DYZNOjFqirrvKN8KLTFw-GNhVSe7fq5B4MuGfOVp9s5hI/s1600/nav-bg.jpg);<br /> <br /> }<br /> <br /> .float-left{<br /> <br /> float: left;<br /> <br /> }<br /> <br /> .float-right{<br /> <br /> float: right;<br /> <br /> }<br /> <br /> .nav-container .divider{<br /> <br /> display:block;<br /> <br /> font-size:1px;<br /> <br /> border-width:0px;<br /> <br /> border-style:solid;<br /> <br /> }<br /> <br /> .nav-container .divider-vert{<br /> <br /> float:left;<br /> <br /> width:0px;<br /> <br /> display: none;<br /> <br /> }<br /> <br /> .nav-container .item-secondary-title{<br /> <br /> display:block;<br /> <br /> cursor:default;<br /> <br /> white-space:nowrap;<br /> <br /> }<br /> <br /> .clear{<br /> <br /> font-size:1px;<br /> <br /> height:0px;<br /> <br /> width:0px;<br /> <br /> clear:left;<br /> <br /> line-height:0px;<br /> <br /> display:block;<br /> <br /> float:none;<br /> <br /> }<br /> <br /> .nav-container{<br /> <br /> position:relative;<br /> <br /> zoom:1;<br /> <br /> margin: 0 auto;<br /> <br /> }<br /> <br /> .nav-container a, .nav-container li{<br /> <br /> float:left;<br /> <br /> display:block;<br /> <br /> white-space:nowrap;<br /> <br /> }<br /> <br /> .nav-container div a, .nav-container ul a, .nav-container ul li{<br /> <br /> float:none;<br /> <br /> }<br /> <br /> .nav-container ul{<br /> <br /> left:-10000px;<br /> <br /> position:absolute;<br /> <br /> }<br /> <br /> .nav-container, .nav-container ul{<br /> <br /> list-style:none;<br /> <br /> padding:0px;<br /> <br /> margin:0px;<br /> <br /> }<br /> <br /> .nav-container li a{<br /> <br /> float:none<br /> <br /> }<br /> <br /> .nav-container li{<br /> <br /> position:relative;<br /> <br /> }<br /> <br /> .nav-container ul{<br /> <br /> z-index:10;<br /> <br /> }<br /> <br /> .nav-container ul ul{<br /> <br /> z-index:20;<br /> <br /> }<br /> <br /> .nav-container ul ul ul{<br /> <br /> z-index:30;<br /> <br /> }<br /> <br /> .nav-container ul ul ul ul{<br /> <br /> z-index:40;<br /> <br /> }<br /> <br /> .nav-container ul ul ul ul ul{<br /> <br /> z-index:50;<br /> <br /> }<br /> <br /> li:hover>ul{<br /> <br /> left:auto;<br /> <br /> }<br /> <br /> #nav-container ul {<br /> <br /> top:100%;<br /> <br /> }<br /> <br /> #nav-container ul li:hover>ul{<br /> <br /> top:0px;<br /> <br /> left:100%;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Primary Items ^'^*/ <br /> <br /> #nav-container a{ <br /> <br /> padding:7px 17px 7px 18px;<br /> <br /> margin: 10px 0px 0px 0px;<br /> <br /> color: #FFFFFF;<br /> <br /> font-family: Trebuchet MS, Arial, sans-serif, Helvetica;<br /> <br /> font-size:14px;<br /> <br /> text-decoration:none;<br /> <br /> font-weight: bold;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNKEsdxP8zTjP1r9tbUP8yXl7n8RJQoqzU08NTsSeK4k8iCYAk1uj28Ls2cy4UzxajzFclS0X8HmfXdmnwYjki6U1jz26Vwdpvhxw7UnFJ_o_m8ePT7juWMxjRlFAxeJq0OeUwU_RsFAv/s1600/item-primary-bg.gif);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: top;<br /> <br /> }<br /> <br /> <br /> <br /> #nav-container a:hover{<br /> <br /> color: #6C3600;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNKEsdxP8zTjP1r9tbUP8yXl7n8RJQoqzU08NTsSeK4k8iCYAk1uj28Ls2cy4UzxajzFclS0X8HmfXdmnwYjki6U1jz26Vwdpvhxw7UnFJ_o_m8ePT7juWMxjRlFAxeJq0OeUwU_RsFAv/s1600/item-primary-bg.gif);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: center;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items Container ^'^*/ <br /> <br /> #nav-container div, #nav-container ul{ <br /> <br /> padding:10px 4px 10px 4px;<br /> <br /> margin:0px 0px 0px 0px;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1IQlKCuh7XW_R07_w6zGmL-kw40EIdPC_hTtgxza_uF0KZxEuMh7oLFVV_FIs6-0-Oum1cxZNiM6agOpSDVP3PmvyZUXrCJmt2n4pS_dYHlzIzGjnm5iExL8J39ESoXmP6hmoj-K1u12h/s1600/item-secondary-container-bg.jpg);<br /> <br /> background-repeat: repeat-x;<br /> <br /> background-color: #FF9900;<br /> <br /> border-bottom: 1px solid #CA6500;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items ^'^*/ <br /> <br /> #nav-container div a, #nav-container ul a{ <br /> <br /> padding:3px 10px 3px 6px;<br /> <br /> background-color: #FFFFFF;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwNtr_DSsvZqY-ef7JqlAJ8d735zqRAMY9ilj4dyuqlhxb_Pwkg0hA7r7kB0xK8Rx93Tqh3vQyss0xHVTAQefDLunQbeZXDuItv3Twd7IUPsjHUdNEpAgs90CCakeybp6-g88g6kKoUrt/s1600/item-secondary-bg.jpg);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: 0px 22px;<br /> <br /> font-size:11px;<br /> <br /> border-width:0px;<br /> <br /> border-style:none;<br /> <br /> margin: 0px 0px 0px 0px;<br /> <br /> width: 149px;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items Hover State ^'^*/ <br /> <br /> #nav-container div a:hover, #nav-container ul a:hover{ <br /> <br /> background-color: #FFFFFF;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwNtr_DSsvZqY-ef7JqlAJ8d735zqRAMY9ilj4dyuqlhxb_Pwkg0hA7r7kB0xK8Rx93Tqh3vQyss0xHVTAQefDLunQbeZXDuItv3Twd7IUPsjHUdNEpAgs90CCakeybp6-g88g6kKoUrt/s1600/item-secondary-bg.jpg);<br /> <br /> background-repeat: no-repeat;<br /> <br /> color:#CC0000;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Item Titles ^'^*/ <br /> <br /> #nav-container .item-secondary-title{ <br /> <br /> cursor:default;<br /> <br /> padding:4px 0px 3px 7px;<br /> <br /> color: #6C3600;<br /> <br /> font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;<br /> <br /> font-size:11px;<br /> <br /> /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyB-0O9LKotAvUeiESA5PTKbj9OK_cRjCjiMpwA4BBPWDDlcOcZy9ZEa0RNxHBjT1kor4lRvJrhXqHTnrGCAQiBXs39XQ60zVxMTFuyujBDg4dUWwGunzKHQ44tcxmPoFoICH9opSmd02T/s1600/item-secondary-title-bg.jpg); */<br /> <br /> background-repeat: no-repeat;<br /> <br /> font-weight:bold;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Horizontal Dividers ^'^*/ <br /> <br /> #nav-container .divider-horiz{ <br /> <br /> border-top-width:1px;<br /> <br /> margin:5px 5px;<br /> <br /> border-color: #C16100;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Vertical Dividers ^'^*/ <br /> <br /> #nav-container .divider-vert{ <br /> <br /> border-left-width:1px;<br /> <br /> height:15px;<br /> <br /> margin:4px 2px 0px 2px;<br /> <br /> border-color:#AAAAAA;<br /> <br /> }

3. Simple Green Drop Down Menu

Kode Html nya
<ul id="navigation-1"> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Products">Products</a><br /> <br /> <ul class="navigation-2"> <li><a href="#" title="Electric Guitars">Electric Guitars</a></li> <li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a><br /> <br /> <ul class="navigation-3"> <li><a href="#" title="Six String">Six String</a></li> <li><a href="#" title="Twelve String">Twelve String</a></li> </ul><br /> </li> <li><a href="#" title="Bass Guitars">Bass Guitars</a></li> <li><a href="#" title="Accessories">Accessories <span>»</span></a><br /> <br /> <ul class="navigation-3"> <li><a href="#" title="Guitar Stands">Guitar Stands</a></li> <li><a href="#" title="Strings">Strings</a></li> <li><a href="#" title="Tuners">Tuners</a></li> <li><a href="#" title="Plectrums">Plectrums</a></li> <li><a href="#" title="Capos">Capos</a></li> <li><a href="#" title="Cases">Cases</a></li> <li><a href="#" title="Straps">Straps</a></li> </ul><br /> </li> </ul><br /> </li> <li><a href="#" title="Your Account">Your Account</a><br /> <br /> <ul class="navigation-2"> <li><a href="#" title="Log In">Log In</a></li> <li><a href="#" title="Register">Register</a></li> </ul><br /> </li> <li><a href="#" title="Help">Help</a><br /> <br /> <ul class="navigation-2"> <li><a href="#" title="FAQs">FAQs</a></li> <li><a href="#" title="Forum">Forum</a></li> <li><a href="#" title="Contact Us">Contact Us</a></li> </ul><br /> </li> <li><a href="#" title="Blah">Links</a><br /> <br /> <ul class="navigation-2"> <li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li> <li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li> <li><a href="#" title="Shure Microphones">Shure Microphones</a></li> <li><a href="#" title="International">International <span>»</span></a><br /> <br /> <ul class="navigation-3"> <li><a href="#" title="Musican's Friend">Musican's Friend</a></li> <li><a href="#" title="Thomann Music">Thomann Music</a></li> <li><a href="#" title="Turnkey">Turnkey</a></li> </ul><br /> </li> </ul><br /> </li> </ul>

Kode CSS nya
div#container<br /> <br /> { width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }<br /> <br /> <br /> <br /> h1<br /> <br /> { width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }<br /> <br /> p { margin:0; padding:1.2em; }<br /> <br /> p a:link,<br /> <br /> p a:visited,<br /> <br /> p a:hover,<br /> <br /> p a:active<br /> <br /> { font-weight:bold; color:#b9121b; }<br /> <br /> <br /> <br /> ul#navigation-1<br /> <br /> { margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}<br /> <br /> ul#navigation-1 li<br /> <br /> { margin:0; padding:0; display:block; float:left; position:relative; width:148px; }<br /> <br /> ul#navigation-1 li a:link,<br /> <br /> ul#navigation-1 li a:visited<br /> <br /> { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }<br /> <br /> ul#navigation-1 li:hover a,<br /> <br /> ul#navigation-1 li a:hover,<br /> <br /> ul#navigation-1 li a:active<br /> <br /> { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }<br /> <br /> <br /> <br /> ul#navigation-1 li ul.navigation-2<br /> <br /> { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }<br /> <br /> ul#navigation-1 li:hover ul.navigation-2<br /> <br /> { display:block; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li<br /> <br /> { width:146px; clear:left; width:146px; }<br /> <br /> <br /> <br /> ul#navigation-1 li ul.navigation-2 li a:link,<br /> <br /> ul#navigation-1 li ul.navigation-2 li a:visited<br /> <br /> { clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li:hover a,<br /> <br /> ul#navigation-1 li ul.navigation-2 li a:active,<br /> <br /> ul#navigation-1 li ul.navigation-2 li a:hover<br /> <br /> { clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }<br /> <br /> <br /> <br /> ul#navigation-1 li ul.navigation-2 li ul.navigation-3<br /> <br /> { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3<br /> <br /> { display:block; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,<br /> <br /> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited<br /> <br /> { background:#b9121b; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,<br /> <br /> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,<br /> <br /> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active<br /> <br /> { background:#ec454e; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li a span<br /> <br /> { position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }<br /> <br /> ul#navigation-1 li ul.navigation-2 li:hover a span,<br /> <br /> ul#navigation-1 li ul.navigation-2 li a:hover span<br /> <br /> { position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }


Cara Penggunaannya :

1. Login ke Blogger
2. Masuk ke Design - Edit Html
3. Centang Expand Widget Templates
4. Cari kode ]]> (gunakan ctrl+f untuk mempercepat pencarian)
5. Copas kode Css nya sebelum kode diatas
6. Save template anda
7. Masuk ke Page Element - add a gadget - add html/javascript
8. Copas kode html nya lalu save
9. Drag html/javascript yang barusan anda tambahkan tadi dibawah header lalu save

Thx For : bdlab