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
: 5511 At:- 5/11/2018 3:25:41 PM
Bootstrap dropdown with hover CSS jQuery

2 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

profileImage Answered by:- bhanu

Above answer works for Bootstrap 3, but if you are using Bootstrap 4, then to show dropdown of navbar on hover you can use below jQuery code

    $(".navbar .dropdown").hover(function() {

Here is the complete code

<link rel="stylesheet" href="">

<script src="" ></script>
<script src=""></script>
<script src="" ></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    $(".navbar .dropdown").hover(function() {

Fiddle here:


At:- 5/19/2021 8:17:12 AM

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