MENU HORIZONTAL DROPDOWN SUB MENU |informasi apa saja

Minggu, 13 Juni 2010

MENU HORIZONTAL DROPDOWN SUB MENU

6/13/2010 06:23:00 AM |

Diposting oleh Unknown |

Edit Entri

NB: tutorial ini sudah menggunakan editor baru blogger

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://earning-news.blogspot.com
================== */

<ul>

   <li><a href='##'>MENU 1</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.D</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.E</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.F</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.G</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.H</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 2</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 3</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 4</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 5</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 6</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.D</a></li>
      </li></ul>
   </li>

<li><a href='http://earning-news.blogspot.com/2010/05/photobucket.html'>TUKAR LINK DAN BANNER</a>
</li></ul>

</div>
</div></div>

Anda hanya perlu mengganti link diatas dengan link anda. lalu simpan dan lihat hasilnya. semoga bermanfaat dan jangan lupa tukaran link ya…. tinggalkan pesan di kotak pesan saya. terima kasih kunjungannya.

http://earning-news.blogspot.com