MENU HORIZONTAL DROPDOWN SUB MENU

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur 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
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;
}
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
/* 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





TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: MENU HORIZONTAL DROPDOWN SUB MENU
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2012/08/menu-horizontal-dropdown-sub-menu.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam