MENU HORIZONTAL DROPDOWN SUB MENU
Jumat, 17 Agustus 2012
0
komentar
MENU HORIZONTAL DROPDOWN SUB MENU | Cara Membuat Horizontal Dropdown Sub Menu | Trik html dan css menu horisontal.
MENU HORIZONTAL DROPDOWN SUB MENU.
NB: tutorial ini sudah menggunakan editor baru blogger
Login ke bloger
rancangan
edit html
cari kode ]]></b:skin>
letakkan kode di bawah ini sebelum ]]></b:skin>
setelah itu simpan template dan lanjutkan tahap kedua
Langsung menuju ELEMENT HALAMAN, lalu TAMBAH GADGET pilih HTML/javascript
langsunga aja copy paste code di bawah ini
artikel cinta fido postingan ini tentang MENU HORIZONTAL DROPDOWN SUB MENU
NB: tutorial ini sudah menggunakan editor baru blogger
Login ke bloger
rancangan
edit html
cari kode ]]></b:skin>
letakkan kode di bawah ini sebelum ]]></b:skin>
/* navbar ================== */ #bg_nav { background: #000000; width: 900px; /* ukuran lebar menu============ */ height: 23px; font-size: 10px; font-family: Arial, Tahoma, Verdana; color: #FFFFFF; font-weight: bold; margin: 0px AUTO 0px; padding-BOTTOM: 5px; border-top: 1px solid #333333; border-bottom: 1px solid #333333; overflow: hidden; } #bg_nav a, #bg_nav a:visited { color: #FFFFFF; font-size: 9px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 3px; } #bg_nav a:hover { color: #FFFFFF; text-decoration: underline; padding: 0px 0px 0px 3px; } #navleft { width: 990px; float: left; margin: 0px; padding: 0px; } #nav { margin: 0px; padding: 0px; list-style: none; } #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { background: #222222; color: #FFFFFF; display: block; font-weight: bold; margin: 0px; padding: 8px 15px 8px 15px; border-left: 1px solid #000000 } #nav a:hover { background: #6e6d6d; color: #FFFFFF; margin: 0px; padding: 8px 15px 8px 15px; text-decoration: none; } #nav li { float: left; margin: 0px; padding: 0px; } #nav li li { float: left; margin: 0px; padding: 0px; width: 150px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #333333; width: 160px; float: none; margin: 0px; padding: 7px 30px 7px 10px; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } #nav li li a:hover, #nav li li a:active { background: #666666; padding: 7px 30px 7px 10px; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; display: block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } |
Langsung menuju ELEMENT HALAMAN, lalu TAMBAH GADGET pilih HTML/javascript
langsunga aja copy paste code di bawah ini
/* http://cintafido.blogspot.com ================== */ <div id='bg_nav'> <div id='navleft'> <div id='nav'> <ul> <li><a href='##'>MENU 1</a> <ul> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.A</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.B</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.C</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.D</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.E</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.F</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.G</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 1.H</a></li> </ul> </li> <li><a href='#'>MENU 2</a> <ul> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 2.A</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 2.B</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 2.C</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 2.D</a></li> </ul> </li> <li><a href='#'>MENU 3</a> <ul> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 3.A</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 3.B</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 3.C</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 3.D</a></li> </ul> </li> <li><a href='#'>MENU 4</a> <ul> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 4.A</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 4.B</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 4.C</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 4.D</a></li> </ul> </li> <li><a href='#'>MENU 5</a> <ul> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 5.A</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 5.B</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 5.C</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 5.D</a></li> </ul> </li> <li><a href='#'>MENU 6</a> <ul> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 6.A</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 6.B</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 6.C</a></li> <li><a href='http://cintafido.blogspot.com'>JUDUL SUB MENU 6.D</a></li> </li></ul> </li> <li><a href='http://cintafido.blogspot.com/2012/08/menu-horizontal-dropdown-sub-menu.html'>TUKAR LINK DAN BANNER</a> </li></ul> </div> </div></div> |
artikel cinta fido postingan ini tentang MENU HORIZONTAL DROPDOWN SUB MENU
Baca Selengkapnya ....