mega-menu using jQuery
<p>I'm trying to create a "mega menu" using nested <code>&lt;ul&gt;</code> within a <code>&lt;li&gt;</code>. Using jQuery (mouseover) on the parent <code>&lt;li&gt;</code>, I can make <code>&lt;ul class="sec1"</code> and <code>&lt;ul class="sec2"&gt;</code> appear. </p>

<p>But the mouseout on <code>li</code> doesn't work because the drop down disappears as soon as you rollout of the parent <code>&lt;li&gt;</code>. How can I keep the drop down active if the mouse is over the parent <code>&lt;li&gt;</code> or either child <code>&lt;ul&gt;</code>?</p>

<p>HTML structure below.</p>

<pre><code>&lt;li&gt;link
 &lt;ul class="sec1"&gt;
  &lt;li&gt;sub-link1&lt;/li&gt;
  ......
  &lt;li&gt;sub-link5&lt;/li&gt;
 &lt;/ul&gt;
 &lt;ul class="sec2"&gt;
  &lt;li&gt;sub-link1&lt;/li&gt;
  ......
  &lt;li&gt;sub-link5&lt;/li&gt;
 &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p>thanks</p>
