JQuery provides a simple drop-down menu for fade-in and fade-out

Some time ago, I have been recommending CSS3 and HTML5 to you. Although it looks so dazzling, many netizens complained about compatibility issues, so today, I will introduce some jQuery plug-ins with better compatibility. Today, I will share a simple drop-down menu that uses jQuery to fade in and out. Let's take a look.

Although simple, it looks pretty good, isn't it?

Next, let's take a brief look at the source code of this drop-down menu, starting with the HTML code:

    Main Cat 1    Main Cat 2                      Sub Cat 2-1            Sub Cat 2-2            Sub Cat 2-3            Sub Cat 2-4            Sub Cat 2-5                        Main Cat 3             Sub Cat 3-1        Sub Cat 3-2        Sub Cat 3-3        Sub Cat 3-4        Sub Cat 3-5        Sub Cat 3-6        Sub Cat 3-7                                Main Cat 

Then there is the CSS code:

{:;:;    }        {:;:;:;    }            {:;            :;:;     }            {:;:;:;      :;:; :;:;:;    }{:;    }            {:;:;:; :;:;:;:;    }{:;:;:;    }            {:;        :;:;:;:;:;:;    }{:;    }

The next step is the important jQuery code, mainly to achieve the effect of Fade-in and fade-out during the drop-down:

$(document).ready(    $('.navigation li'                    $('ul', ).fadeIn();                         $('ul', ).fadeOut();     

Here we use the fadeIn () and fadeOut () Methods of jQuery, so those familiar with jQuery will not be unfamiliar with them.

In addition, you can see more beautiful CSS3 menus here. For compatibility issues, please choose between them.

Finally, share the source code of this menu,>