title: How can I make it so the dropdown menu stays there when I'm hovering on it?
body: <p>I have the following dropdown menu:</p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;div class="container"&gt;
      &lt;ul class="navigation"&gt;
        &lt;li&gt;
          &lt;a href=""&gt;&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
            &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  #header .navigation {
      float: right;
      margin: 15px 0 0;
      position: relative;
  }
  #header .navigation li {
      float: left;
      margin: 0 20px 0 0;
      position: relative;
  }
  #header .navigation li a {
      float: left;
  }
  #header .navigation li:hover .sub-menu {
      display: block;
      transition: all 0.0s ease 0s;
  }
  #header .navigation &gt; li &gt; .sub-menu {
      display: none;
      width: 150px;
      transition: all 0.0s ease 0.2s;
      padding: 10px 15px 2px;
      position: absolute;
      top: 20px;
      left: 0;
  }
  #header .navigation &gt; li &gt; .sub-menu li {
      clear: both;
      margin: 0 0 10px;
      width: 100% ;
  }
  #header .sub-menu .sub-menu li {
      padding: 10px 0 0 15px;
      margin: 0 !important;
  }
  </code></pre>
  
  <p>The problem is that the <code>.sub-menu</code> disappears immediately after I leave the parent. How can I make it so that <code>.sub-menu</code> stays where it is as long as I'm hovering it?</p>
  
  <p>Here's a live example: <a href="http://m2c.dreamhosters.com/wordpress/" rel="nofollow">http://m2c.dreamhosters.com/wordpress/</a></p>