jQuery menu with CSS sprite
<p>I have a jQuery menu which works fine, I want to add a CSS sprite so that when 'li' is closed it has a plus sign and when it is expanded it has a minus sign.</p>

<p>Any suggestions based on the code below please?</p>

<p>Thank you</p>

<pre><code>$(document).ready(function() {

$('#sidenav &gt; li &gt; ul, #sidenav &gt; li &gt; ul &gt; li &gt; ul').hide();

$('#sidenav &gt; li').click(function(){
$ul = $(this).children('ul').slideDown('slow');
$('#sidenav &gt; li &gt; ul').not($ul).slideUp('slow');
});

$('#sidenav &gt; li &gt; ul &gt; li').click(function(){
$ul = $(this).children('ul').slideDown('slow');
$('#sidenav &gt; li &gt; ul &gt; li ul').not($ul).slideUp('slow');
}); 
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;ul id="sidenav"&gt;
&lt;li class=""&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
    &lt;ul&gt;
        &lt;li class=""&gt;&lt;a href="#"&gt;Submenu 1&lt;/a&gt;     
            &lt;ul&gt;            
                &lt;li&gt;Submenu-1A&lt;/li&gt;
                &lt;li&gt;Submenu-2A&lt;/li&gt;                    
            &lt;/ul&gt;        
        &lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="#"&gt;Submenu 2&lt;/a&gt;      
            &lt;ul&gt;
                &lt;li&gt;Submenu-1A&lt;/li&gt;
                &lt;li&gt;Submenu-2A&lt;/li&gt;                    
            &lt;/ul&gt;            
        &lt;/li&gt;
        &lt;li&gt;Submenu 3&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;

&lt;li class=""&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;Submenu 1&lt;/li&gt;
        &lt;li&gt;Submenu 2&lt;/li&gt;
        &lt;li&gt;Submenu 3&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;

&lt;li class=""&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;Submenu 1&lt;/li&gt;
        &lt;li&gt;Submenu 2&lt;/li&gt;
        &lt;li&gt;Submenu 3&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
