#hover nav

I had to manually add it :)

Yep, I got the codes from this tutorial :)

© This code belongs to 4lisonwonderland and public distribution or use with out credit is a breach of the terms and services

Live View

Play&Style Code

Paste this code under the <style type=”text/css”> tag

To style use the notes in the */ tags and use the play&style link

.bmenu{ padding: 0px; margin: 0 0 10px 0; position: relative; width: 150px; /* Width of links*/ overflow: none; } /* ------------------ NORMAL STATE ------------------ */ li:nth-child(even){ -webkit-transform:skewX(10deg); background-color: #F9C; /* Background Color of even links */ } li:nth-child(odd){ -webkit-transform:skewX(-10deg); background-color: #6CF; /* Background Color of Odd links */ } .bmenu > li { position: relative; display: inline-block; opacity: 0; padding-left: 5px; padding-right: 5px; height: 20px; } .bmenu:hover > li{ opacity: 1; overflow: none; font-size: 20px; display: block; text-align: center; } .bmenu:hover > li:nth-child(odd) { -webkit-animation-name: bounceInDown; -webkit-animation-duration: 1s; } .bmenu:hover > li:nth-child(even) { -webkit-animation-name: bounceInDown2; -webkit-animation-duration:1s; }

Now paste this code where you want your hover links to be

Note: Change the link url and names to your liking