Membuat Sub Menu dengan CSS

Halo Sahabat Pintar!

Jumpa lagi di kolom tutorial IT! Kali ini kita akan belajar untuk membuat sub menu pada web menggunakan CSS. Bagi yang belum tahu, silakan baca artikel sebelumnya di sini tentang Dasar CSS dan Cara Penggunaan CSS.

Nah, sekarang kita akan belajar membuat sub menu dengan menggunakan HTML dan CSS.

HTML menu kondisi awal, di bagian body:
<ul>
<li><a href=”URL 1″>MENU 1</a>
<ul>
<li><a href=”URL sub 1″>Sub menu 1</a></li>
<li><a href=”URL sub 2″>Sub menu 2</a></li>
<li><a href=”URL sub 3″>Sub menu 3</a></li>
</ul>
</li>
<li><a href=”URL 2″>MENU 2</a></li>
<li><a href=”URL 3″>MENU 3</a></li>
</ul>

bentuknya seperti

menu HTML

Untuk menghilangkan list style pada menu drop down, di bagian title, tambahkan script CSS berikut:
#menuku ul {
list-style: none;
}

akan menjadi seperti

menu HTML tanpa list

Untuk membuat menu-menu tersebut tampil secara horizontal dari kiri:
#menuku li {
float: left;
}

sehingga menjadi seperti:

menu HTML float left

Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
#menuku ul ul {
visibility:hidden;
width:100px;
}
menu HTML float left hidden sub menu
Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
#menuku ul li:hover ul,
#menuku ul a:hover ul{
visibility:visible;
}
menu HTML float left hover
Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
#menuku li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}

menu HTML CSS formattedDownload File HTMLnya plus CSS di sini

Nah, seru kan? Simak terus ya Tutorial IT di LKP KEMBAR!

Jika Sahabat Pintar berminat untuk mengikuti workshop/kursus komputer, baik pemrograman web, desain (Corel, Photoshop, Dreamweaver, Flash), ms office, page maker, in design, blog, dsb, silakan hubungi:

LKP Kembar

JL. Solo-Yogya km.30 Jombor Ceper Klaten

Telp (0272) 3154 777

www.rumahpintar-kembar.com

5 KEUNGGULAN LKP KEMBAR:

  1. Pengajar yang ramah dan berpengalaman
  2. Harga terjangkau dan bisa dicicil
  3. Waktu yang fleksibel
  4. Sertifikat berizin resmi Dinas Pendidikan dan Dinas Sosial Tenaga Kerja dan Transmigrasi (Izin Dinas Pendidikan nomor 602/LKP/11.2012, dan Izin Dinas Sosial Tenaga Kerja dan Transmigrasi Nomor: 563/2424.A/14.)
  5. Dijamin BISA!!! Untuk semua umur dan kalangan.

Jangan lupa..ada program seru IT CAMP loh selama liburan, 2-7 Juli 2012 pk 09.00-10.30..di mana kita bisa membuat berbagai kreasi IT menarik! 🙂