title: Delay for 1 second the disappearance of a dropdown menu when the mouse is moved away, unless it is returned
body: <p>Here is my HTML navbar</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul id="mainnav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;a thing&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;some stuff&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="###"&gt;dropdown1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="###"&gt;dropdown2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;           
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and the Javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $('#mainnav ul').hide();
  
  $('#mainnav li &gt; a').hover(
        function () {
        //show its submenu
          $('ul', this.parentNode).stop().slideDown(0) = set 
        }
      );
  
  $('#mainnav li').hover(null, 
        function () {
        //hide its submenu
          $('ul', this.parentNode).stop().delay(1000).slideUp(0); 
      });
  </code></pre>
  
  <p>I got the JavaScript from a jsfiddle and made it work out. I am quite competent in HTML and CSS, but apart from fairly obvious logic, I would say JavaScript is alien to me.</p>
  
  <p>With the CSS it all looks like this: <img src="https://i.stack.imgur.com/PsU9V.png" alt=""></p>
  
  <p>I'm looking for a CSS snippet that, when I take my mouse <strong>OFF</strong> (hover(null)) of the dropdown menu and it doesn't disappear <em>immediately</em>, but rather delays until after a second, <strong>but won't disappear if i put my mouse back onto the menu before it does</strong>.</p>
  
  <p>I have had a really good look, but couldn't find any answer on the site that not only addresses this precise issue directly but is also simple enough for me to understand.</p>