Bootstrap navbar dropdown with hover animation effect

View demo Download

By default bootstrap does not support hover. But most developers (including me) prefer to show dropdown on hover state. There is two ways to do that.

1) With Javascript's onmouseenter, mouseleave or via jQuery's hover() method.
Here is tutorial

2) Another simple way is just with CSS. Actually on another example we showed how to do simple hover menu by using display:block and display:none. Check it here.
But in this example we will use some animation like menu appearing from down with fade effect. Let's get started...

Steps to create bootstrap navbar hover animation menu

• It is better to create hover effect only for desktop screens. That's why we use Media query. @media all and (min-width: 992px) { // CSScode }
• Add display:block; to dropdown-menu
• Hide dropdown-menu with opacity: 0; visibility: hidden; and change position before it appears, for ex top:250%; or add transform
• Now make menu visible when mouse hovers on nav-item by changing opacity:1; visibility:visible;
• Change final position to top:100%; when mouse hovers on nav-item. Add some transition
• Note: bootstrap has margin-top on dropdown-menu elements. Remove it by adding margin-top:0

Here are basic code snippets