Cara membuat menu dropdown yang terpisah dari menu

Hai teman-teman dumetschool !

Menu dropdown memiliki banyak variasi dalam pembuatan tampilannya. Dari segi posisi juga memiliki beberapa jenis. Namun ada intinya untuk variasi posisi menu hanya ada 2 macam saja secara garis besar yaitu menempel di area menu atau secara terpisah dari area menu.

Beberapa waktu lalu ada seorang murid yang menanyakan bagaimana agar menu saja tidak menempel namun dorpdownnya juga tidak langsung menghilang. Jawabannya sangat mudah, asal tahu caranya.  Jawabannya adalah kita menggunakan kombinasi antara menu transition dan menu delay saat sebelum dan sesudah hover.

Berikut demonya untuk lebih jelasnya

Pada intinya pada mode normal, anak menu atau tag <ul> tingkat ke-2 di beri delay agar tidak langsung hilang.

    transition-delay: 2s;
    -o-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -webkit-transition-delay: 2s;

Mudah bukan teman-teman cara membuatnya. Semoga bermanfaat, Salam Semangat !