If one UL already is opened, hide the other one, how?
<p>So, I'm creating a submenu by myself by following the jQuery codex only and I got stuck. Everything else is perfect, though.</p>

<p>I have an HTML structure like the following:</p>

<pre><code>&lt;li&gt;&lt;a href="#"&gt;smth&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;smth sub&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;smth&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;smth sub 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p>And let's say that the first SMTH is opened. Now, when I click on the second SMTH it will just appear on top of the other one.</p>

<p>My jQuery code is as follows.</p>

<pre><code>$(document).ready(function() {
    /*
    * header navigation
    */

    // hide sub UL's
    $('ul.sub').hide();

    $('#header .left li.m:first a, #header .right li.m:first a').css('borderLeft', 'none');
    $('#header .left li.m:last a, #header .right li.m:last a').css('borderRight', 'none');

    // Add class closed, because it's nessesery.
    $('#header .left li ul').addClass('closed');

    // If LI element is clicked, open or close sub UL?
    $('#header .left li').click(function(event)
    {
        // If sub UL is closed, we need to open it.
        if( $(this).find('ul').hasClass('closed') )
        {
            $(this).find('ul').removeClass('closed');
            $(this).find('ul').addClass('opened');
            $(this).find('ul').fadeIn('100');
        }
        // If sub UL is opened, we need to close it.
        else
        {
            $(this).find('ul').removeClass('opened');
            $(this).find('ul').addClass('closed');
            $(this).find('ul').fadeOut('100');
        }
    });
});
</code></pre>
