CARA MEMBUAT MENU DROPTDOWN DENGAN MENGGUNAKAN CSS MENU GENERATOR 3.2.

1.Buka program menu Css Generator 3.2
  - klik menu item (menu awal biasanya tertulis HOME)
  - klik tab +new  (tampil menu kedua), tulis nama menu dan jangan lupa isi Link yg akan     dituju pada jendela kotak edit menu.
  - klik tab + new sub menu ( tambahkan beberapa sub menu dengan +new sub menu)
    dengan langkah yang samatambahkan kembali menu jika dibutuhkan dan tambahkan juga sub        menu tulis nama sub menu dan link yg dituju.
2.pilih tab pull- Down Menu dan atur warna sesuai keinginan termasuk jenis huruf yang   didinginkan, ukuran dan lebar menu.
3.klik tab HTML/CSS Code > Menu Code

  - kotak pertama adalah kode Css nya.
  - kotak kedua adalah kode HTML
4. klik Copy to clipboard di kotak pertama Code Css.d
 
   contoh kode:

<style type="text/css" media="screen">
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01  a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

5. klik copy to clipboard dikotak kedua atau kode HTML.
 
   contoh kode:

<div class="pd_menu_01 ">
<ul><li><a href="/">Home<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
</div>

cara mengaplikasikannya:

Tahap Pertama: Paste Kode Css.
setelah sign in di blogg anda, langkah berikutnya adalah:
1. masuk ke Rancangan/ design
2. Edit HTML dan beri tanda centang pada expand
3. paste salinan kode htmlnya diatas kode ]]></b:skin> (  untuk memudahkan mencari kode ]]></b:skin>     ctrl gunakan ctrl + F keyboard, jika browser anda menggunakan mozilla).
   kemudian hapus baris pertama dan baris terakhir kode tersebut yaitu kode:
   <style type="text/css" media="screen">
   dan kode:
   </style>

   Selanjutnya carilah kode di bawah ini
   <div id='header-wrapper'>
   <b:section .......dst>
   </b:section>
    </div>
   lalu copy kode di bawah ini tepat di bawah kode di atas..


    <div id='pd_menu_01'><b:section class='menu1' id='menu1' preferred='yes'/> </div>

   ( keterangan: kode ini untuk menambah halaman gadget baru dibawah header, sehingga            menunya dapat diletakkan di gadget ini)

4. kemudian klik simpan templete.

Tahap Kedua: Paste Kode Html.
1. Masuk kerancangan/design.
2. Edit elemen/Edit laman.
3. add Gadget/ tambah gadget.
4. add Html/java Script
5. paste kode Html diatas dikotak konfigurasi html gadget tersebut.
   contoh kode:
<div class="pd_menu_01 ">
<ul><li><a href="/">Home<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
</div>
 
   simpan, dan lihat hasilnya,....selesai.

Peletakan menu ini tentu masing masing memiliki selera tempat penempatan yang berbeda.
bisa diatas Header ataupun dibawah header, untuk membuat halaman di atas header ataupun di bawah header..dapat mengikuti langkah Cara memasang Bar Menu
dan Menambah elemen di header maupun bawah header