title: Setting active state for multi level menu items from Javascript function
body: <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>