title: Bootstrap CSS transition onhover
body: <p>Hi I'm trying to replicate the beautiful CSS transition dropdown menu onhover of devdojo.com (<a href="https://devdojo.com/ebook/laravelsurvivalguide" rel="nofollow noreferrer">https://devdojo.com/ebook/laravelsurvivalguide</a>) but can't replicate it. It is the onhover of the 3 dots in the main menu. Maybe I'm missing something? Thanks!</p>
  
  <p>My CSS:</p>
  
  <pre><code>.dropdown-menu-animated {
      border: 0 none;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
      display: block;
      margin-top: 0;
      opacity: 0;
      transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
      transform-origin: 100% 0 0;
      transition-delay: 0s, 0s, 0.5s;
      transition-duration: 0.5s, 0.5s, 0s;
      transition-property: opacity, transform, visibility;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      visibility: hidden;
  }
  
  .dropdown-menu {
      background-clip: padding-box;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
      display: none;
      float: left;
      font-size: 14px;
      left: 0;
      list-style: outside none none;
      margin: 2px 0 0;
      min-width: 160px;
      padding: 5px 0;
      position: absolute;
      top: 100%;
      z-index: 1000;
  }
  .open &gt; .dropdown-menu-animated {
      visibility: visible;
      opacity: 1;
      transition: opacity .5s, -webkit-transform .5s;
      transition: opacity .5s, transform .5s;
      transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
      -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right"&gt;
      &lt;ul class="nav navbar-nav navbar-left"&gt;
          &lt;li class="dropdown"&gt;
              &lt;a class=" dropdown-toggle" href="#_" data-toggle="dropdown"&gt;
                              HOVER ME
              &lt;/a&gt;
              &lt;ul class="dropdown-menu dropdown-menu-animated" role="menu"&gt;
                  &lt;li&gt;
                      &lt;a href="/points"&gt;Sushi Points&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/points"&gt;Two&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Thanks @chiller . </p>
  
  <blockquote>
    <p>Updated and edited answer:</p>
  </blockquote>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.dropdown-toggle').hover(function() {
      $(this).parent().addClass("open");
  });
  
  $('.dropdown').mouseleave(function() {
      $(this).removeClass("open");
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.dropdown-menu li a {
      color: white;
  }
  .dropdown-menu-animated {
      border: 0 none;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
      display: block;
      margin-top: 0;
      opacity: 0;
      transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
      transform-origin: 100% 0 0;
      transition-delay: 0s, 0s, 0.5s;
      transition-duration: 0.5s, 0.5s, 0s;
      transition-property: opacity, transform, visibility;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      visibility: hidden;
  }
  .dropdown-menu {
      background-clip: padding-box;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
      /*display: none;*/
      float: left;
      font-size: 14px;
      left: 0;
      list-style: outside none none;
      margin: 2px 0 0;
      min-width: 160px;
      padding: 5px 0;
      position: absolute;
      top: 100%;
      z-index: 1000;
  }
  .open &gt; .dropdown-menu-animated {
      visibility: visible;
      opacity: 1;
      transition: opacity .5s, -webkit-transform .5s;
      transition: opacity .5s, transform .5s;
      transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
      -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right"&gt;
      &lt;ul class="nav navbar-nav navbar-left"&gt;
          &lt;li class="dropdown"&gt;
              &lt;a class="dropdown-toggle" href="#_" data-toggle="dropdown"&gt;
                              HOVER ME
              &lt;/a&gt;
            &lt;ul class="dropdown-menu dropdown-menu-animated" role="menu" style="color:white;background:black;"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Bulanching&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Kuya Matmat&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Baby&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Wedding&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Excited&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>