title: How can I delay a :hover effect in CSS?
body: <p>Is there a way to delay the :Hover event without using JavaScript? I know there is a way to delay animations, but I haven't seen anything on delaying the :hover event.</p>
  
  <p>I'm building a son-of-suckerfish like menu. I'd like to simulate what hoverIntent does without adding the extra JS weight. I'd prefer to treat this as a progressive enhancement and not make JS a requirement for using the menu.</p>
  
  <p>Example of menu markup:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
              &lt;li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the full demo: <a href="http://jsfiddle.net/aEgV3/" rel="noreferrer">http://jsfiddle.net/aEgV3/</a></p>