Untuk membuat Menu Dropdown, tambah kan kode dibawah ini :

<li><a href='#'>KOMPUTER</a>

<ul>

<li><a href='#'>Hardware</a></li>

<li><a href='#'>Software</a></li>

<li><a href='#'>Tutorial</a></li>

</ul>

</li>

Penjelasan kodenya adalah :

<li><a href='#'>KOMPUTER</a> 

Digunakan untuk membuat Menu Utama, tambahkan tanda # di Menu Utama.

<ul>

<li><a href='#'>Hardware</a></li>

<li><a href='#'>Software</a></li>

<li><a href='#'>Tutorial</a></li>

</ul>

Kode di atas digunakan untuk membuat Sub Menu.

Pada Sub Menu, ganti tanda # dengan alamat URL blog kamu.

9. Terakhir klik Save Template untuk menyimpan template.

10. Selesai. Jika ada pertanyaan, silahkan melalui komentar dibawah ini.

Berikut ini langkah-langkah yang harus dilakukan :

1. Klik Menu Desain 

2. Pilih Menu Template lalu pilih menu Edit HTML 

3. Pilih/klik menu Lanjutkan

4. Pilih/klik menu Expand Template Widget

5. <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>

   Cari scrift berikut :

Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>.

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi : 

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

PENJELASAN :

• Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
• Contoh : http://pandawalimamedan.blogspot.com/search/label/Kesehatan. Maka ini menjadi link Submenu utama dan juga sebagai label.
• Contoh : http://pandawalimamedan.blogspot.com/2012/08/cara-membuat-sub-menu-pada-menu-utama.html. Maka ini menjadi link isi submenu.
• Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
• Contoh : Kesehatan. Ini menjadi Judul Submenu
• Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan. 

7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.

Saran : back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

8. Untuk menghilangkan tampilan tampilan dabel dengan Laman Utama, 
Maka ikutilah saran berikut :

• Masuk ke Menu Laman 
• Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
• Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Blog sudah bisa dipublikasikan...

Semoga sharing yang saya buat ini bisa bermanfaat dan menambah khazanah pengetahuan kita semua.

sumber :

<style>

#tab_menu {
    background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW2AIkDBhZqv3MWVtxOWZxJBFCZq100dyM3iev5n9X5JV8IFKy56RhgsnRxjj0Wc_Ybw58W9EszeQcL8Be4E2jYYX2xN0adqJknmBPaOioS4Q66RAFaSmioGB__9smHcc1rILwtULG9S3E/s1600/menu_bg_3.png
) no-repeat;
    height:50px;
    width:800px;
    line-height:50px;
    list-style:none;
    margin-top:10px;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    overflow:hidden;
}

#tab_menu li {
    float:left;
    border-right:1px solid #FFA722;
    border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
    border-left:none;
}

#tab_menu li:last-child {
    border-right:none;
}

#tab_menu li a{
    text-decoration:none;
    float:left;
    display:block;
    height:50px;
    padding:0 20px;
    color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
    color:#622900;
    text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
    color:#000;
    text-shadow:1px 1px 0px #E8964B;
}

</style>

<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

http://sharetipsdancara.blogspot.com/2014/09/cara-mudah-membuat-menu-navigasi-keren.html


1 Masuk ke akun Dashboard Blogger Anda >> Layout >> dan klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)
2. Klik Tambah Gadget.
3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.
4. Biarkan kotak judul kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam kotak konten.

 

 

 

<style>

#tab_menu {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw3-_5GlnJAhKnjP8JujSzXRmvS0K3A999hPgTsPoiYPwwcmR7JIohG3xRu1nVS4pk2uNZpFtrrcSgL3YIhj0pZTnrcpjQECnfYvDunkuPLajaSeEnOPCOPF49z2BF9sb5ZLmz4PB0mMnF/s1600/menu_bg.png) no-repeat;
    height:50px;
    width:960px;
    line-height:50px;
    list-style:none;
    margin-top:10px;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    overflow:hidden;
}

#tab_menu li {
    float:left;
    border-right:1px solid #FFA722;
    border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
    border-left:none;
}

#tab_menu li:last-child {
    border-right:none;
}

#tab_menu li a{
    text-decoration:none;
    float:left;
    display:block;
    height:50px;
    padding:0 20px;
    color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
    color:#622900;
    text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
    color:#000;
    text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Ganti "#" dengan URL halaman tujuan Anda.
7. Anda bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada di halaman tersebut.
8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label.
9. Untuk mengubah lebar lebar menu edit: 960px.

Nah anda bisa menggantinya sesuka hati anda, atau anda bisa mengganti background warna pada menu navigasi dengan mengganti link url background diatas yang saya tandai dengan warna merah dengan link url background dibawah ini, atau anda lebih suka untuk menggunakan warna lain, silahkan anda lihat kode warna html yang telah saya sediakan.


1.menu_bg_1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9BCqspLDNZbqTX1jsFjvSU4SeQjQmGGX_MDaiQ-mua2xkD6fSfsRqbK1C8g5jT7qgbocH2Y4JjS5_i3Wz_4Co-ZOoIX-yNe6-35NfmQqJNUXN_EFSmta-2OrP8wQYb-IoMiPwqKTakOa/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwDglyoVLxYkWEf6w4h-jzscpFAgU1JocHBDc_xhlIwLnvqVsmRsxY8nh6DUDllYSlaBo9E3J95OYO6i5xj4L8YrRIW0nbEGGubBdDDLVyfjsbf8FMtlSwO0wNqw56qc8Qxyv3MYHjgRa/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW2AIkDBhZqv3MWVtxOWZxJBFCZq100dyM3iev5n9X5JV8IFKy56RhgsnRxjj0Wc_Ybw58W9EszeQcL8Be4E2jYYX2xN0adqJknmBPaOioS4Q66RAFaSmioGB__9smHcc1rILwtULG9S3E/s1600/menu_bg_3.png

4. menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMw9Wa8NmjvSJaLYX4xa7n5HdB4X2nwbKN4nWrru65YnLafpqz7iufin2BAwIYApRPFwTCNAZNXmcseC5YbaREoNv_uoKK2-8M-YX0eMjId5iZBtwBV0jvb03gHRiQ6DEpZYwWLkZ_H9X0/s1600/menu_bg_4.png

5. menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXgjxf3ihkpgk7QK8HBGpjCRI-hs_wHdEVA47ozmfNVIeFL5v-c-O6J67u4RLztu1pUVa3h1TDfy8UNZqM7-NTV3Rp3Iw_vo0Bz_26vNm0xAIvaUD6B3hp6ZsAIQipeQbeKkscvSp2PAF/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9AmlX58hjzguLxosbbQEqNL3J8AA2NAGtlAVctfGB5JfMeCHgItZprLepLdd0CTJfH7owSOkzf9BFzHs47jiuCYlgIPfCkqWvfnsOLJiJVxKDeHc7XkbebCC5gbAfwo5zZPGn-6a-GgM/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwFBpUhkmBLToL9NtoPTHlFsd10oCd2f-Dp9vOsLQNL4HByipPjZLVXlXJQFlvxb_C8rrakeO_-TCJ0VwvqeBiu1G3l-forVCdRmTwYu0zrsY6-Mium20lYFZ1BMgrz7rP0RhzcesnhLa/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDz2A19TTpB9Dz-klXUJEdIlTwmTq-I3B8wgia10XRQZdSK0upapNJj-rA8nkUFI3AK6PZikztjStRAfE1moRoACMfZUJBKtSA48q9Iy71G0SRhuEfJmc7Xzc1uowa8F8hLikH9UUzL1Nt/s1600/menu_bg_8.png

9. menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBA5ciXKhfdpxTHOgIDJxWQ5T4MkokpVyxW7ORRkxyW85VVJV_j8nFE0vMnkWjB9LMUrxoCjwcvkRnCuK9h2jzhhTkmx1V8QDi1q761ynwdW3GOOWeUtu0L1mlS5cWbs2duRzJqv-k7i8h/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLx1hfhR8y2ZTIvWDypR4hG3GrVw1f0VTXp2ufx8NNt_JWsr5msmEWf1c1dnyAufoZ96dRZQ4OPj3HjKQtjwcJ7JdmWGa6qvPKdu-7iOT0AfbvdrqM5TiiES7Atbr70IU_SiJ-ilWwYXhI/s1600/menu_bg_10.png

Jika sobat ingin menggunakan menu bar ini di blog sobat silahkan ikuti langkah-langkah dibawah ini :

• Masuk ke akun blog sobat.
• Pilih Template =>> Edit HTML.
• Kemudian cari kode ]]></b:skin> ( Untuk mempercepat pencarian gunakan Ctrl+F di kotak script EDit HTML).
• Copy kode dibawah ini, kemudian Paste tepat diatas kode ]]></b:skin>.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background:#24459A;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background:black;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background:#24459A;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: #24459A;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background:black;
margin: 0;
padding: 0;
z-index: -1;
-webkit-transition: all .35s .2s ease-in-out;
-moz-transition: all .35s .2s ease-in-out;
-ms-transition: all .35s .2s ease-in-out;
transition: all .35s .2s ease-in-out;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
background:#24459A;
}
#cssmenu > ul ul li a:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyJ1Bzu4zKPzKIsbqAmWwYQ-bVEAQA1E1HEy0jSzGWd-8oVQW8B4s8wU0Zor9hYIRc1AG8iAwKdfHo4kK2pEkaQhnY6n6mLTMP8ctQu66EzD_g-s5voByO9AixNy_3DIaA-V9yGCmI7E/s1600/menu-bg.png) repeat;
}menu > ul > li > ul > li > ul{
left: 202px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li{
float: none;
}

sumber : http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-menu-bar-keren-dengan-css3.html