Membuat Hover Menu Menggunakan Transition Delay Part 2

Hallo teman-teman Dumet school, kembali lagi dengan saya di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Hover Menu Menggunakan Transition Delay Part 2 pada css. Di pembahasan sebelumnya bagian part 2 kita sudah membuat tampilan menunya. Dan sekarang langkah terakhir kita akan membuat efek dari transition delaynya dengan menggunakan css.

Langsung saja untuk Membuat Hover Menu Menggunakan Transition Delay Part 2 pada css kita langsung membuat style cssnya seperti script di bawah ini.

<style type="text/css">
.menu li:hover .submenu li:nth-child(1) {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
    .menu li:hover .submenu li:nth-child(2) {
        -webkit-transition-delay: 50ms;
        -moz-transition-delay: 50ms;
        -ms-transition-delay: 50ms;
        -o-transition-delay: 50ms;
        transition-delay: 50ms;
    }
    .menu li:hover .submenu li:nth-child(3) {
        -webkit-transition-delay: 100ms;
        -moz-transition-delay: 100ms;
        -ms-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }
    .menu li:hover .submenu li:nth-child(4) {
        -webkit-transition-delay: 150ms;
        -moz-transition-delay: 150ms;
        -ms-transition-delay: 150ms;
        -o-transition-delay: 150ms;
        transition-delay: 150ms;
    }
    .menu li:hover .submenu li:nth-child(5) {
        -webkit-transition-delay: 200ms;
        -moz-transition-delay: 200ms;
        -ms-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
    }
    .menu li:hover .submenu li:nth-child(6) {
        -webkit-transition-delay: 250ms;
        -moz-transition-delay: 250ms;
        -ms-transition-delay: 250ms;
        -o-transition-delay: 250ms;
        transition-delay: 250ms;
    }
    .menu li:hover .submenu li:nth-child(7) {
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -ms-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
    }
    .menu li:hover .submenu li:nth-child(8) {
        -webkit-transition-delay: 350ms;
        -moz-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        -o-transition-delay: 350ms;
        transition-delay: 350ms;
    }

    .submenu li:nth-child(1) {
        -webkit-transition-delay: 350ms;
        -moz-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        -o-transition-delay: 350ms;
        transition-delay: 350ms;
    }
    .submenu li:nth-child(2) {
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -ms-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
    }
    .submenu li:nth-child(3) {
        -webkit-transition-delay: 250ms;
        -moz-transition-delay: 250ms;
        -ms-transition-delay: 250ms;
        -o-transition-delay: 250ms;
        transition-delay: 250ms;
    }
    .submenu li:nth-child(4) {
        -webkit-transition-delay: 200ms;
        -moz-transition-delay: 200ms;
        -ms-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
    }
    .submenu li:nth-child(5) {
        -webkit-transition-delay: 150ms;
        -moz-transition-delay: 150ms;
        -ms-transition-delay: 150ms;
        -o-transition-delay: 150ms;
        transition-delay: 150ms;
    }
    .submenu li:nth-child(6) {
        -webkit-transition-delay: 100ms;
        -moz-transition-delay: 100ms;
        -ms-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }
    .submenu li:nth-child(7) {
        -webkit-transition-delay: 50ms;
        -moz-transition-delay: 50ms;
        -ms-transition-delay: 50ms;
        -o-transition-delay: 50ms;
        transition-delay: 50ms;
    }
    .submenu li:nth-child(8) {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
</style>

Jika sudah selesai maka tampilannya seperti pada gambar di bawah ini.

Jadi setiap submenu ada delaynya masing-masing sesuai yang sudah kita tentukan. Sampai disini dulu pembahasan mengenai cara Membuat Hover Menu Menggunakan Transition Delay Part 2. Semoga artikel ini dapat bermanfaat dan selamat mencoba.