Looking to add some flair to your list elements? Have a look at these 8 dropdown effects for lists created in pure CSS by Ed Southgate. These can be used as effects that you want to add on hover for your navigation menu.
1st effect : Like dealing playing cards the list items stack up one after the other on hover.
2nd effect : The list items drops down one after the other on hover.
3rd effect : The list items opens into view from the center one after the other on hover.
4th effect : The list item slides into place, slightly going forward and then snaps back into place.
5th effect : The list item drops into view like how the flaps of a venetian blinds stacks into place when it’s dropped.
6th effect : Like dealing playing cards the list items stack up one after the other from the right.
7th effect : A line drops down and then expands into the list item kinda like a water droplet sliding down the side of a glass.
8th effect : This effect kinda mimics the opening of a Japanese folding hand fan.
If you are having trouble with the pen, try the archived copy on GitHub
See the Pen Dropdown CSS animation examples. by Ed Southgate (@southface) on CodePen.0