title: Transition on hovering and unhovering
body: <p>Everybody! I have a problem with hovering and unhovering. When somebody hovers over an element a drop up menu must appear. It appears gracefully but disappears ungracefully. Below is the CSS code.</p>
  
  <pre><code>.active-box .dropup-content {
    visibility: hidden;
    position: absolute;
    color: rgb(59, 151, 74);
    border-radius: 3px;
    width: 700px;
    bottom: 5em;
    height: 250px;
    z-index: 3;
    margin: 0;
    background-color: rgb(66, 67, 66);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    transition: all ease-out;
    transition-duration: .2s;
  }
  
  .dropup:hover .dropup-content {
    visibility: visible;
    cursor: pointer;
  }
  </code></pre>