Setting active state for multi level menu items from Javascript function
<p>I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.</p>

<p>My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.</p>

<p>I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.</p>

<p>Here is the existing function which tells a link to be active or selected:</p>

<pre><code>var Lst;

function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
</code></pre>

<p>and here is the menu code:</p>

<pre><code>&lt;ul class="topnav"&gt;
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Top Link 2&lt;/a&gt;
    &lt;ul&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Cookies&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Forms&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Games&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Images&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Navigations&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;JQuery&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Tabs&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Tutorials&lt;/a&gt;
    &lt;ul&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Java&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;JSP&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;JSF&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;JPA&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
         &lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Tabs&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a onclick="CngClass(this);" href="#"&gt;Upload script&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p></p>

<p>Many thanks for any help or ideas...</p>
