Home / BLOGGER / MENU HORIZONTAL DROPDOWN SUB MENU

MENU HORIZONTAL DROPDOWN SUB MENU

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

Posted by Unknown 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>

/* 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 Unknown
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.