Menjaga Keadaan Hover pada Menu Induk

Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilang setelah pointer memasuki submenu:

Efek hover pada menu induk menghilang saat pointer memasuki submenu

Sebelum

Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini:

nav li a:hover {
  background-color:blue;
}

Padahal yang seharusnya kita targetkan adalah elemen list/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <li>, bukan di dalam elemen <a>:

Susunan Submenu

Sayangnya menargetkan elemen <li> secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <a>, sehingga saat pointer keluar dari <a> maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <li> kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna direct children tautan di dalamnya:

nav li a:hover,
nav li:hover > a {
  background-color:blue;
}

Dengan cara di atas maka warna pada menu induk akan tetap terjaga meskipun pointer sudah meninggalkannya. Karena meskipun sudah keluar, tapi pada dasarnya pointer masih berada di dalam elemen <li> induk:

Warna hover pada menu induk tetap terjaga

Sesudah

Artikel Terkait: Mari Berbicara Soal Menu Navigasi