Cara Membuat Menu Dropdown Dengan Css Pada Website Dan Blog

Sebelum kita menulis atau mengatakan sesuatu ada baiknya jika kita tau terlebih dahulu apa arti yang kita sebutkan tersebut,, biar ga keliatan sok pinter dan sok ganteng( ini salah).. heheh. Seperti pada umumbya jika kita pengen tau sesuatu didalam benak kita pasti ada tanya donk?? yang selalu diawali dengan kalimat tanya pastinya.....

Untuk Lebih singkat kita to the point aje yeee,, simak percakapan  2 cowo ngenes berikut berikut :

• Dadang : Eh Mansyur koq di website lu menunya keren gitu sih??
• Mansyur : maksud lu keren gimana??
• Dadang : Yah keren jadi rapih gitu navigasinya,, jadi menu yang mau kita buat lebih hemat tempat,, soalnya saat gue mouse hover ada anaknya gitu... itu apa sih namanya??
• Mansyur : oh itu namanya menu dropdown Dang,,
• Dadang : Menu dropdown?? artinya apa syur??
• Mansyur :  Dropdown Menu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah.atau yang sering disebut dengan anak menu utamanya. gitu dang? lu mau gue buatin ga?? ntar sesuain aja sama selera lu yah??
• Dadang : Yah mau donk,, oke makasih ya syur..
• Dadang : siap,, nih copy aje script dibawah ini ke website lu nanti,, letaknya suka-suka naro dimana

Screenshootnya dang

Dropdown Menu

Nah Sekarang Tinggal cara buatnya

Untuk Htmlnya seperti  dibawah ini dadang!!

<div id="menu">
< !--start menu--> <ul id="topmenu">
<li><a href="#">Home</a></li>
<li><a href="#" title="About the Company">Induk Menu Anda</a>
<ul>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
</ul>
</li>
<li>
<a href="#" title="title anda">Induk Menu Anda</a>
<ul>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
</ul>
</li>
<li>
<a href="#" title="title anda">Induk Menu Anda</a>
<ul>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
</ul>
</li>
<li>
<a href="#" title="title anda">Induk Menu Anda</a>
<ul>
<li><a href="#">Menu Anda</a></li>
<li><a href="#">Menu Anda</a></li>
</ul>
</li>
</ul>
</div><!--end menu-->

Dan untuk Stylenya silahkan lihat code dibawah ini

#topmenu{ list-style:none; font-weight:bold; margin:0 0 10px 0; float:left; width:100%; z-index:100; }
#topmenu li{ float:left; margin-right:1px; position:relative; }
#topmenu a { display:block; padding:5px; color:#fff; background:#009; text-decoration:none; }
/* ============ DROPDOWN MENU ============ */
#topmenu ul{ background:#009; list-style:none; }
#topmenu ul li{ padding:1px 0 0 0; float:none; }
#topmenu ul a{ white-space:nowrap; }
#topmenu li:hover ul{ left:0; }
#topmenu li:hover a{ color:#000; background:#fff; text-decoration:none; }
#topmenu li:hover ul a{ text-decoration:none; }
#topmenu li:hover ul li a:hover{ color:#fff; background:#009; }

Sekian dulu yah tutornya kapan-kapan kita belajar bareng lagi,, doain aje saya rajin posting heheheh

Thank You for visiting my site.. bye