Jquery toggle on anchor using its parent to find child ul
===

I'm trying to toggle segments in my menu using jquery. I can getting it working if i bind the toggle on the <li> element but then as soon as i click on any elements in the <li> the elements disappear, obviously because of the toggle. So ive tried adding the toggle event to the anchor with no success please see my code below. J query is at bottom. Thanks


    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-latest.js"></script>
        </head>
        <body>
            <header><link href="mobmenu.css" rel="stylesheet" type="text/css"/>
            </header>
            <div id="wrapper">
            <h1>Flyout Menu Demo - (Vertical Menu System) </h1>
                <div id="main_navigation">
                    <ul class="menu_level1">
                        <li><a href="#">Home</a></li>
                        <li class="submenu1"><a class = "sb1" href="#">Products</a>
                            <ul class="menu_level2">
    	                        <li class="submenu2"><a class = "sb2" href="#">Category 1</a>
    		                        <ul  class="menu_level3">
    		                        <li class="submenu"><a class = "sb3" href="#">Product 1</a>
    			                        <ul  class="menu_level4">
    			                        <li><a href="#">Product 1 Sub 1</a></li>
    			                        <li><a href="#">Product 1 Sub 2</a></li>
    			                        <li><a href="#">Product 1 Sub 3</a></li>
    			                        </ul>
    		                        </li>
    		                        <li><a href="#">Product 2</a></li>
    		                        <li><a href="#">Product 3</a></li>
    		                        </ul>
    	                        </li>
    	                        <li class="submenu2"><a class = "sb2" href="#">Category 2</a>
    		                        <ul  class="menu_level3">
    		                        <li><a href="#">Product 1</a></li>
    		                        <li><a href="#">Product 2</a></li>
    		                        </ul>
    	                        </li>
    	                    </ul>
                        </li>
                        <li class="submenu1"><a class= "sb1" href="#">Services</a>
    	                    <ul  class="menu_level2">
    	                        <li><a href="#">Services 1</a></li>
    	                        <li><a href="#">Services 2</a></li>
    	                    </ul>
                        </li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.sb1').bind('mousedown', openSubMenu1);
                    $('.sb2').bind('mousedown', openSubMenu2);
    
                    //$('.submenu2').bind('mousedown', openSubMenu);
    
                    function openSubMenu1() { $(this).parent.find('ul.menu_level2').toggle(); };
                    function openSubMenu2() { $(this).parent.find('ul.menu_level3').toggle(); };
    
                });
            </script>
            
        </body>
    </html>

