 <p>Here is my solution: <a href="http://jsbin.com/oteze/8" rel="nofollow noreferrer">http://jsbin.com/oteze/9</a> I tested it on Firefox 3.6.8. ADD: Now it works in IE7 too.</p> <p>You can nest any number of submenus anywhere. Just like that:</p> <pre><code>&lt;li&gt;&lt;a href="#"&gt;Child 1.2&lt;/a&gt; &lt;ul class="child"&gt; &lt;li&gt;&lt;a href="#"&gt;Child 1.2.1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Child 1.2.2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p>I modified your code a little, so there is difference between first level submenu and other levels. I also moved all show/hide logic to JS.</p> <pre><code> $(document).ready(function() { $("#Programming ul.child-first-level").hide(); $("#Programming ul.child").hide(); $("#Programming ul.child").each(function(index) { $(this).css("margin-left", $(this).parent().css("width")); }); $("#Programming li ul.child-first-level").parent().hover( function() { $(this).children("ul").fadeIn(); }, function() { $(this).children("ul").stop(true, true).css("display", "none"); } ); $("#Programming li ul.child").parent().hover( function() { var offset = $(this).children("ul").offset(); offset.top = 0; $(this).children("ul").offset(offset); $(this).children("ul").css("margin-left", $(this).parent().css("width")); $(this).children("ul").fadeIn(); }, function() { $(this).children("ul").stop(true, true).css("display", "none"); } ); }); </code></pre>