title: CSS Dropdown Menu: Add delay on mouse out
body: <p>I have dropdown using CSS and HTML below:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Main Menu&lt;/title&gt;
      &lt;style&gt;
      .menu
      {
          float:left;
          background:#CCC;
          margin:0px;
          padding:0px;
      }
  
      .menu  li
      {
          position:relative;
          float:left;
          width:180px;
          padding: 5px 0px;
          list-style: none;
      }
  
      .menu li:hover
      {
          background:#999;
      }
  
      .menu ul
      {       
          display:none;
          position:absolute;
          background:#CCC;
          padding:0;
          margin:5px 0 0 0;
      }
  
      .menu ul li ul
      {
          left:100%;
          top:0;
          margin:0px;
      }
  
      .menu li:hover ul ul, .menu li:hover ul ul ul
      {
          display: none;
      }
  
      .menu li:hover ul, .menu ul li:hover ul, .menu ul ul li:hover ul
      {
          display: block;
      }   
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt;Home&lt;/li&gt;
          &lt;li&gt;
              Categories
              &lt;ul&gt;
                  &lt;li&gt;Lorem Ipsum&lt;/li&gt;
                  &lt;li&gt;Dolor Sit Amet&lt;/li&gt;
                  &lt;li&gt;Consectetuer&lt;/li&gt;
                  &lt;li&gt;
                      Adipiscing
                      &lt;ul&gt;
                          &lt;li&gt;Child Elit Set Diam Nonummy&lt;/li&gt;
                          &lt;li&gt;
                              Child Suspendisse sed
                              &lt;ul&gt;
                                  &lt;li&gt;Grand Child Nulla dolor dui&lt;/li&gt;
                                  &lt;li&gt;Grand Child Venenatis feugiat&lt;/li&gt;
                                  &lt;li&gt;Grand Child Morbi ac lectus&lt;/li&gt;
                                  &lt;li&gt;Grand Child Nulla dolor dui&lt;/li&gt;
                                  &lt;li&gt;Grand Child Venenatis feugiat&lt;/li&gt;
                                  &lt;li&gt;Grand Child Morbi ac lectus&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;Child Nulla dolor dui&lt;/li&gt;
                          &lt;li&gt;Child Venenatis feugiat&lt;/li&gt;
                          &lt;li&gt;Child Morbi ac lectus&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;Elit Set Diam Nonummy&lt;/li&gt;
                  &lt;li&gt;Suspendisse sed&lt;/li&gt;
                  &lt;li&gt;
                      Nulla dolor dui
                      &lt;ul&gt;
                          &lt;li&gt;Child Elit Set Diam Nonummy&lt;/li&gt;
                          &lt;li&gt;Child Suspendisse sed&lt;/li&gt;
                          &lt;li&gt;Child Nulla dolor dui&lt;/li&gt;
                          &lt;li&gt;Child Venenatis feugiat&lt;/li&gt;
                          &lt;li&gt;Child Morbi ac lectus&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;Venenatis feugiat&lt;/li&gt;
                  &lt;li&gt;Morbi ac lectus&lt;/li&gt;
                  &lt;li&gt;pharetra&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Order&lt;/li&gt;
          &lt;li&gt;Payment&lt;/li&gt;
          &lt;li&gt;Contact&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JSBIN:<br>
  <a href="http://jsbin.com/anojif" rel="noreferrer">http://jsbin.com/anojif</a></p>
  
  <p>I want to add delay in this dropdown, so when the mouse is moved out, child menu still appear for seconds. I have try some tutorial out there, but it so confuse. </p>
  
  <p>I dont want using any jquery dropdown menu for some reason. Can you help me how to make this happen using javascript. </p>
  
  <p><strong>SOLVED: <a href="http://jsbin.com/otapex/2" rel="noreferrer">http://jsbin.com/otapex/2</a></strong></p>