I am working on a vertical menu that has main links with sub links below it. The sub links appear when you click on the main links (its parent link). I want to use a simple image in place of the default bullet, and it has to show only on the main link depending if the main link and sub links are expanded. I have it so the image shows the way I want it as I click around, but only up to a point.

What I'm looking for is code that will put the image on the main link if someone lands on that particular section, and then removed when they navigate away to another main or sub link (then the image will appear there instead - on the main link).

Can someone please help me out?

Here is my HTML and javascript that I have so far:

Code:
       <ul class="menu">
            <li class="item1"><a href="page.html">Products</a>  /* has bullet when page loads */
              <ul>
                <li class="subitem1"><a href="#">Misc</a></li>
                <li class="subitem2"><a href="#">Misc</a></li>
                <li class="subitem3"><a href="#">Misc</a></li>
                <li class="subitem4"><a href="#">Misc</a></li>
                <li class="subitem5"><a href="#">Misc</a></li>
              </ul>
            </li>
            <li class="item2"><a href="#">Service</a>  /* bullet would move here when clicked */
              <ul>
                <li class="subitem1"><a href="#">Misc</a></li>
                <li class="subitem2"><a href="#">Misc</a></li>
                <li class="subitem3"><a href="#">Misc</a></li>
                <li class="subitem4"><a href="#">Misc</a></li>
              </ul>
            </li>
            <li class="item3"><a href="#">Parts</a>  /* bullet would move here when clicked */
              <ul>
                <li class="subitem1"><a href="#">Misc</a></li>
                <li class="subitem2"><a href="#">Misc</a></li>
                <li class="subitem3"><a href="#">Misc</a></li>
                <li class="subitem4"><a href="#">Misc</a></li>
              </ul>
            </li>
          </ul>
And the js:

Code:
<script type="text/javascript">
    $(function() {   
        var menu_ul = $('.menu > li > ul'),
               menu_a  = $('.menu > li > a');
       
        menu_ul.hide();
         $('.item1 > ul').show();
   
        menu_a.click(function(e) {
            e.preventDefault();           
            if(!$(this).hasClass('active')) {
                menu_a.removeClass('active');   
                menu_ul.filter(':visible').slideUp('normal');
                $(this).addClass('active').next().stop(true,true).slideDown('normal');
            } else {
                $(this).removeClass('active');
                $(this).next().stop(true,true).slideUp('normal');
            }
        });
   
    });
</script>