Very cool CSS3 vertical drop-down animation menu

Yesterday I introduced you to a jQuery fade-in and fade-out drop-down menu with good compatibility. Today I want to share a relatively brilliant CSS3 vertical drop-down animation menu, however, only browsers that support CSS3 can be effective. Next, let's take a look.

The source code is analyzed as follows:

                                                                            Home                    sweet home                                                                                                About us                    sweet home                                                                                                Features                    sweet home                                                                                                News                    sweet home                                                                                                Blog                    what they say                                                    Mission                                            Our Team                                                    Leyla Sparks                                                            Gleb Ismailov                                                                    About                                    Skills                                                                                        Viktoria Gibbers                                                                Rewards                    Certificates                                                                                                Portfolio                    sweet home                                                                                                Contacts                    drop a line                                                                                                                                                                                            

Here, we use ul to construct the basic structure of the menu.

Next, we will use the CSS3 code to implement the menu drop-down and animation effects.

CSS code is cumbersome. Here I only provide some core CSS code. You can download the complete code at the end of the article.

This is the animation code when the mouse slides over the menu item:

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

The following defines the text icon slide animation after the mouse slides, namely, from the top, from the left, and from the right:

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

Finally, share the source code,>