How to create bootstrap dropdown with hover animation?

I would like to create a bootstrap dropdown with hover animation, how can I create it?

My Current HTML code is as below, which is a basic drop-down menu created using Bootstrap.


 <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>

It is working when we hover and Click on it, but I need to add hover with animation effect, how to do it?

Asked by:- jon
: 1240 At:- 5/11/2018 3:25:41 PM
Bootstrap dropdown with hover CSS jQuery

1 Answers
profileImage Answered by:- neena

Try this HTML/CSS code, should work

<ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>


.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;

.dropdown:hover .dropdown-menu {
    max-height: 200px;
    opacity: 1;

Here is the working fiddle we are doing animation using CSS transition property.

At:- 5/13/2018 7:14:08 PM
thanks got it 0
By : jon - at :- 5/21/2018 5:58:40 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly