Cara Membuat Efek Hover Vertikal Pada Menu Menggunakan CSS3

Hallo teman-teman ketemu lagi dengan saya di blog DUMET School. Apa kabar nih semuanya mudah-mudahan sehat semuanya ya, amin. Oke ditutorial kali ini saya ingin mengajarkan bagaimana caranya membuat efek hover vertical pada Menu atau Navigasi hanya menggunakan CSS tanpa bantuan jQuery. Baiklah langsung saja kita praktekan ya teman-teman.

Pertama kalian bisa membuat HTML nya ditext editor kalian masing-masing, seperti dibawah ini :

Kemudian CSS nya seperti gambar dibawah ini :

Pada CSS diatas kalian bisa lihat saya menggunakan Pseudo Element :nth-child(n), n bisa kalian isikan berdasarkan urutan list (li) yang akan diberikan style misalnya list 1, 2, 3, dst. Fungsi pseudo element ini adalah untuk memberikan style pada anak (child) dari sebuah deretan item yang tersedia didalam sebuah susunan daftar list dan cara menghitungnya dimulai dari list yang paling atas atau list pada urutan no 1.

DOWNLOAD

Sekian dulu tutorial dari saya sampai ketemu ditutorial berikutnya. Terima Kasih.