navigation menu issue Javascript
===

Visit http://shahhardik.in/navigationmenu/ click on Home , i am facing the problem that third level menu is not Propper , all sibblings are one on another.
i want more 2 sub menu level (intotal 5 level menu ).
not on hover but on click(so i dropped the idea of css hover).

See image : TEST 1 is Hidden Under the Next Siblings Sub Menu.

http://i.stack.imgur.com/zuhWb.jpg 


HTML CODE
       
        	<ul id="nav" style="clear:both;">
		<li>HOME
				  <ul class="child">
			<li>BRAND STORY</li>
			<li>ABOUT US
					  <ul class="child">
				<li>TEST 1</li>
				<li>TEST 1</li>                
				<li>TEST 1</li>
				<li>TEST 1</li>
			  </ul>
					</li>
			<li>THE TEAM
					  <ul class="child">
				<li>TEST 2</li>
				<li>TEST 2</li>
			  </ul>
					</li>
			<li>INVESTORS</li>
			<li>PARTNERS</li>
			<li>NEWS</li>
			<li>EXERBIA THEATRE</li>
		  </ul>
				</li>
		<li style="font-size:17px;">PROJECTS</li>
		<li style="font-size:17px;">BUY ONLINE</li>
		<li>TECHNOLOGY</li>
		<li>THE GREEDN BUTTON</li>
		<li>URBAN MIRACLE</li>
		<li>AHOUSEFOREVERYINDIAN</li>
		<li>CHECK-IN</li>
		<li>CAREERS</li>
	</ul>
MENU JAVASCRIPT
	
        $(document).ready(function () {
		$('#nav > li > ul').hide();
		$('#nav > li').click(function (event) {
			var attr = $(this).attr('id')
			
			if (this !== event.target) {
				return false;
			}

			if ($('#nav ul').is(':animated')) {			
				return false;
			}

			$heading = $(this);
			$expandedSiblings = $heading.siblings().find('ul:visible');

			if ($expandedSiblings.size() > 0) {
				$expandedSiblings.slideUp(300, function () {
					$heading.find('ul').slideDown(300);
				});
			} else {
				$heading.find('ul').slideToggle(300);
			}

		});

	});		  