add and remove bullet from list items

add and remove bullet from list items

I am working on a vertical menu that has main links with sub links. The sub links appear when you click on the main links (its parent link).

I have an image that I'm using in place of the standard bullet that appears just fine when I click around on the various main links. The problem is the main links needs to have the bullet present when someone lands on them or their sub links. Can someone help me out?

Here is my code:
  1.         <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>

























  2. <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>






















Thanks!