Memasang CSS Menu Navigator

Dulu saya ingin banget buat menu yang kalo cusor nempel di tab langsung keluar menu-menu yang lain...
saya juga bingung mau jelasinnya gimana,.hihiiii..
sebagai contoh, sobat bisa langsung intip di blog saya. Tepatnya di paling atas blog saya itu lho...
lanjuttttttt...

Yang paling penting Sebelum memulai pengeditan alangkah baiknya sobat membackup data sobat terlebih dahulu, caranya pilih Download Template Lengkap.

Kalo udah, Cari kode ]]> .biar lebih mudah sobat bisa menekan Ctrl + F

Trus tinggal masukin aja script dibawah ini (letakkan di atas ]]>):

/* pull-down mainmenu css */<br /> .mainmenu{<br /> float: left;<br /> width: 100%;<br /> padding: 0;<br /> }<br /> .mainmenu ul {<br /> float: left;<br /> width: 100%;<br /> list-style: none;<br /> line-height: 1;<br /> color:#FFFF00;<br /> background: #000080;<br /> padding: 0;<br /> border: solid #A0A0A4;<br /> border-width: 1px 0;<br /> margin: 0 0 1em 0;<br /> }<br /> <br /> .mainmenu a, .mainmenu a:visited {<br /> display: block;<br /> font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;<br /> color: #FFFF00;<br /> text-decoration: none;<br /> padding: 1em 1em;<br /> }<br /> .mainmenu ul ul a{<br /> width:100%;<br /> height:100%;<br /> }<br /> .mainmenu ul a{<br /> width:1%;<br /> }<br /> <br /> <br /> .mainmenu li {<br /> float: left;<br /> margin:0;<br /> padding:0;<br /> }<br /> <br /> .mainmenu ul li {float:left; position:relative; }<br /> .mainmenu ul li a {white-space:nowrap;}<br /> <br /> .mainmenu li ul {<br /> position: absolute;<br /> left: -999em;<br /> height: auto;<br /> width:15em; <br /> <br /> background: #000080;<br /> font-weight: normal;<br /> border-width: 1px;<br /> margin: 0;<br /> }<br /> <br /> .mainmenu li li {<br /> width:15em ;<br /> }<br /> <br /> .mainmenu li li a{<br /> width:13em ;<br /> }<br /> <br /> .mainmenu li ul {<br /> margin: 0;<br /> }<br /> .mainmenu li ul ul {<br /> margin: -2.8em 0 0 13.5em;<br /> }<br /> .ul_ch,<br /> .mainmenu li:hover ul ul,<br /> .mainmenu li li:hover ul ul,<br /> .mainmenu li li li:hover ul ul,<br /> .mainmenu li li li li:hover ul ul,<br /> .mainmenu li li li li li:hover ul ul<br /> {<br /> left: -999em;<br /> }<br /> .mainmenu li:hover ul,<br /> .mainmenu li li:hover ul,<br /> .mainmenu li li li:hover ul,<br /> .mainmenu li li li li:hover ul,<br /> .mainmenu li li li li li:hover ul<br /> {<br /> left: auto;<br /> }<br /> .mainmenu li:hover>ul.ul_ch <br /> {<br /> left: auto;<br /> }<br /> <br /> .mainmenu li:hover{<br /> background: #FF0000;<br /> }<br /> <br /> .mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{<br /> color:#FFFF00;<br /> }<br /> .mainmenu li:hover li a, .mainmenu li li:hover li a,<br /> .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,<br /> .mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,<br /> .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited<br /> {<br /> color:#FFFF00;<br /> }<br /> .mainmenu li li:hover, .mainmenu li li li:hover,<br /> .mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover<br /> {<br /> background: #B90000;<br /> z-index:9999;<br /> }<br /> .mainmenu li li:hover a,.mainmenu li li li:hover a,<br /> .mainmenu li li li li:hover a, .mainmenu li li li li li:hover a<br /> {<br /> color: #FFFF00;<br /> }<br /> <br /> .mainmenu ul ul a, .mainmenu ul ul a:visited,<br /> .mainmenu li li a, .mainmenu li li a:visited<br /> {<br /> color: #FFFF00;<br /> }<br /> .mainmenu ul ul a:hover,<br /> .mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,<br /> .mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,<br /> .mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,<br /> .mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,<br /> .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{<br /> color: #FFFF00;<br /> }<br /> .mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,<br /> .mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,<br /> .mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,<br /> .mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{<br /> color: #FFFF00;<br /> }<br /> /* end of mainmenu css */

Okley, tinggal save aja sob...
trus Pilih HTML/JavaScript Tambah & masukin scrip di bawah:

<!-- PULL DOWN MENU - BEGIN --><br /> <div class="mainmenu"> <br /> <ul><br /> <li class="li_nc"><a href="ganti url blog sobat ini" target="_self" >HOME</a></li> <br /> <li class="li_hc"><a href="#" target="_self" >TUTORIAL</a><ul class="ul_ch"><br /> <li class="li_nc"><a href="alamat link menu sobat" target="_self" >Nama Link</a></li> <br /> <li class="li_hc"><a href="ganti dengan url milik sobat" target="_self" >Nama Link</a><ul class="ul_ch"><br /> <li class="li_nc"><a href="#" >nama link 2</a></li> <br /> </ul> <br /> </li> <br /> </ul> <br /> </li> <br /> <li class="li_hc"><a href="#" target="_self" >INFO</a><ul class="ul_ch"><br /> <li class="li_nc"><a href="ganti dengan url milik sobat" >Nama Link</a></li> <br /> </ul> <br /> </li> <br /> <li class="li_nc"><a href="ganti dengan url milik sobat" target="_self" >CONTACT</a></li> <br /> </ul> <br /> </div> <br /> <!-- END OF PULL DOWN MENU -->

Tugas selesai.....
Sedikit catatan si boy nich sob:
Warna bisa di ganti dengan warna yang sobat inginkan..
sippp, sampai ketemu lagi di posting berikutnya..........

Subscribe My Channel

Saling berbagi ilmu itu indah.