title: I Want To Apply Delay On Mouse Out in css
body: <p>I am trying to apply a delay before starting a CSS transition on mouse out event. My CSS code is below, please let me know how to apply time delay before CSS transition on mouse out starts. </p>
  
  <p>I want to achieve that the menu stays stable for some time (e.g. for 3 seconds) after the user moves mouse pointer out of the menu. </p>
  
  <pre><code>.timnav li .dropdown {
      width: auto;
      min-width: 0px;
      max-width: 230px;
      height: 0;
      position: absolute;
      overflow: hidden;
      z-index: 999;
      background:rgba(255, 255, 255, 0.8);
      }
  
  .timnav li:hover .dropdown {
      min-height: 60px;
      max-height: 500px;
      height: auto;
      width: 100%;
      padding: 0;
              -webkit-transition: delay .5s ease-in-out;
          -moz-transition: delay .5s ease-in-out;
          -o-transition: delay .5s ease-in-out;
  }
  
  .timnav li .dropdown ul {
      margin: 0;
      margin-top:7px;
  
  
  }
  
  .timnav li .dropdown ul &gt; li {
      display: block;
      width: 100%;
      float: left;
      text-align: left;
      height: auto;
      border-radius: none;
      padding-bottom:2px;
  }
  
  
      .timnav li .dropdown  .dropdown2{
      display: none;
      width: 100%;
      float: left;
      text-align: left;
      height: auto;
      border-radius: none; 
  }
  
      .timnav li .dropdown ul &gt; li:hover .dropdown2{
      display: block;
      width: 100%;
      float: left;
      text-align: left;
      height: auto;
      border-radius: none;
  
  }
  
      .timnav li .dropdown .dropdown2:hover {
      display: block;
      width: 100%;
      float: left;
      text-align: left;
      height: auto;
      border-radius: none;
  
  
  }
  
  
      .timnav li .dropdown .dropdown2 li a {
      display: block;
      padding-left:7px !important;
      height:6 !important;
      padding-top:8px;
      background: url(../images/nav-bg.jpg) repeat; color:#fff;
  
  }
  
  
  .timnav li .dropdown ul &gt; li a {
      display: block;
      line-height: 26px;
      height: 22px;
      padding: 10px;
      background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF;
  
  }
  
  .timnav ul .dropdown ul li:first-child a {
      border-radius: 0;
  }
  
  .timnav li .dropdown li a:hover {
      background: url(../images/nav-bg.jpg) repeat; color:#000;
  }
  </code></pre>