Konsep Dasar Menu DropDown Struktur Html Dengan Css

Blog & Script Tutor - Ingin membuat menu dropdown? Atau sedang mencari menu dropdown dengan mudah? Mungkin sebagian dari kalian selain ingin copas script juga ingin belajar.Maka anda sebentar lagi akan mendapatkannya. Belum tahu menu dropdown? Menu dropdown itu merupakan suatu menu / laman / pages yang ketika di hover / diatas menu ada mouse maka
akan ada menu lagi dibawahnya. Jika masih bingung silakan terapkan kode dibawah post ini. Menudropdown yang akan dibahas di blog ini ada 2 jenis, yaitu yang ada css agar lebih rapi dan bagus dan yang hanya html dengan sedikit css yang membuatnya lebih sederhana. Untuk yang ingin belajar pengenalan Html dan Css bisa klik di Sini untuk Html dan Sini untuk Css. Oke lanjut lagi silakan baca artikel ini sampai habis dan cermati agar proses belajar jadi cepat.

Bahasan 1, Cara mencoba :
> Bisa dicoba dengan menyimpan dengan format html di laptop dan dinuka dengan browser (tutor lengkap di artikel html sebelumnya)

Cara membuat dan strukturnya :

1. Buat dengan notepad++ link ada di sidebar
2. Tulis struktur html lengkap, struktur lihat di sini.
3. Masukkan kode html (ul dan li adalah kata kunci) berikut :
<menudrop>
<ul>
<li>
<ul><li><a href="/">Home</a></li></ul>
<ul><li><a href="#">Menu 1</a>
<ul><li><a href="#">Sub Menu 1</a></li></ul>
<ul><li><a href="#">Sub Menu 2</a></li></ul
</li></ul>
</li>
</ul>
</menudrop>
4. Masukkan kode css (harus sama dengan tag dan id) berikut di dalam tag style :
menudrop { padding:5px; margin:5px; } menudrop a { color:white; font-weight:bold; text-decoration:none; } menudrop ul, ul { list-style:none; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */ background: rgb(30,87,153); /* Old browsers */ background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ } menudrop ul ul:hover { background-color:lightblue; } menudrop ul ul ul li:hover { background-color:lightred; } menudrop ul ul ul li { display:none; background-color:red; } menudrop ul ul li:hover ul li { display:block; }
5. Simpan dengan CTRL+S dengan nama "dropdown1.html" tanpa petik
6. Buka file html tadi dengan browser anda (saran pakai mozilla firefox atau chrome)
7. Silakan diedit2 sendiri  cssnya untuk lebih bagus

Oke sekian trik dan cara dari saya, nantikan artikel tahap 2 yang 50%50% css and html dari saya. Terimakasih telah membaca, tanyakan bila ada masalah..