cara buat menu horizontal dengan drop tab menu-CSS3

Hem Hujan hujan gini minum kopi sambil posting Tapi masih bingung mau posting apa saya angkat lagi deh postingan bulan bulan kebelakang dari pada tenggelem hehehehehehe

ok kali ini saya mau kasih tau lagi bagaimana cara membuat menu horizontal dengan CSS ini lagi ini lagi :-P ga apa apalah dari pada ini terkubur waktu kirain aja ada newbie yang ingin mencoba :-D

menu Horizontal ini memiliki sub menu atau child (anak) menu dibagian bawah yang membentuk tab horizontal  satu Hla yang paling Bagus Menu ini hanya Menggunakan CSS saja Tanpa plug in Java script Saya pakai menu ini Di template web tema saya ....... Menu ini Sangat ringan Waktu loading dan Tidak bikin web anda lelet Baiklah Bila anda Tertarik dengan Menu Horizontal Ynag Satu ini Anda ikuti Langkah Berikut:

1.log In Ke blog Anda ____>>> Edit HTML
2.Centang Expand Template Widget  dan Backup Dulu template Anda
3.Cari CODE ]]></b:skin>

sekarang  memasukan Kode CSS!
anda taruh Code di Bawah kotak ini Sebelum Atau Diatas Kode ]]></b:skin>

       #menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;  
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;     
}

/* ACTIVE*/
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}

/* DAFTAR Submenu tersembunyi secara default */
ul#nav  ul {
  display: none;
}

/* KETIKA TINGKAT PERTAMA ITEM MENU melayang di, ATAS MENU ANAK MUNCUL */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;  
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

Note: Jika Anda Tidak Ingin Memakai Radius ganti 10px Dengan 0px

-moz-border-radius-topright: 10px;

  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topleft: 10px;

  -webkit-border-top-left-radius: 10px;

Tahap Selanjutnya Anda Tinggal memasukan Kode Html-nya 

<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
 <ul>
 <li><a href="#">Menu 1 Submenu item 1</a></li>
 <li><a href="#">Menu 1 Submenu item 2</a></li>
 <li><a href="#">Menu 1 Submenu item 3</a></li>
 </ul>
</li>

<li><a href="#">Menu 2</a>
 <ul>
 <li><a href="#">Menu 2 Submenu item 1</a></li>
 <li><a href="#">Menu 2 Submenu item 2</a></li>
 <li><a href="#">Menu 2 Submenu item 3</a></li>
 </ul>
</li>

<li><a href="#">Menu 3</a>
 <ul>
 <li><a href="#">Menu 3 Submenu item 1</a></li>
 <li><a href="#">Menu 3 Submenu item 2</a></li>
 <li><a href="#">Menu 3 Submenu item 3</a></li>
 </ul>
</li> 
</ul>

</div>

Note:

<ul id="nav">
<li><a href="#">Menu 1</a>
 <ul>
 <li><a href="#">Menu 1 Submenu item 1</a></li>
 <li><a href="#">Menu 1 Submenu item 2</a></li>
 <li><a href="#">Menu 1 Submenu item 3</a></li>
 </ul>
</li>

"Anda Lihat Tanda # Ganti dengan URL anda dan "Menu 1" Nama Menu Anda "Menu 1 Submenu item 1"ini Untuk Sub menu Anda

Untuk Memasang Code HTML saya percaya anda sudah Pada mahir dan Tergantung Mau Disimpan Dimana bisa Lewat add html/java script Atau langsung Cari Code <div id='content-wrapper'> taruh di atasnya atau Cari kode header dan Copy Dibawahnya'''''

LIHAT MENU HORIZONTAL bagus YANG LAIN Disini

Selamat Mencoba

trims"
Senantiasa Belajar