I'm trying to create a menu, but the submenu items are on top of each other.

here is my html
Code:
<div class="navigation-wrapper overlay-bg border-bottom-white padding-level-one main-menu">
					<ul class="testing">
					<li>
				<a class="nav-active main-menu-sub" href="javascript:void(0);">
				Design services
				</a>
				<div class="main-menu-sub-wrapper">
				<div class="main-menu-sub-inner" style="display:none;">
				<ul class="testing1">
				<li><a href="javascript:void(0);">graphic design</a></li>
				<li><span>/</span></li>
				<li>
				<a class="main-menu-sub1" href="javascript:void(0);">Logo design</a>
				<div class="main-menu-sub-wrapper1">
				<div class="main-menu-sub-inner1" style="display:none;">
				<ul>
				<li><a href="#">Corporate identity design</a></li>
				<li><a href="#">Corporate identity guidelines</a></li>
				<li><a href="#">Fixed fee logo design</a></li>   
				</ul>
				</li>
				<li><span>/</span></li>
				<li><a href="#">Website Design</a></li>
				</ul>
				</div>
				</div>
			</li>
			<li><a href="#">Design portfolio</a></li>
            <li><a href="#">Design fees</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Design resources</a></li>
            <li><a href="#">Design vacancies</a></li>
            <li><a href="#">Terms</a></li>  
            <li class="nav-arrow no-action">
            	<img src="images/nav-arrow-white.png" />
           	</li>
			<div class="clearboth"></div>
		</ul>
		<div class="clearboth"></div>
				</div>
Here is my jquery
Code:
	$(".main-menu-sub").click(function(){
		if($(".main-menu-sub-inner").css("display") == "block"){
			$(this).removeClass("active");
			$(this).addClass("inactive");
			$(".main-menu-sub-inner").stop().slideToggle(250);
		} else {
			$(this).removeClass("inactive");
			$(this).addClass("active");
			$(".main-menu-sub-inner").stop().slideToggle(250);
		}
	});
	
	$(".main-menu-sub-inner a").hover(function(){
		$(this).find("img").eq(0).fadeOut(250);
		$(this).find("img").eq(1).fadeIn(250);
	}, function(){
		$(this).find("img").eq(0).fadeIn(250);
		$(this).find("img").eq(1).fadeOut(250);
	});
	
	$(".main-menu-sub1").click(function(){
		if($(".main-menu-sub-inner1").css("display") == "block"){
			$(this).removeClass("active");
			$(this).addClass("inactive");
			$(".main-menu-sub-inner1").stop().slideToggle(250);
		} else {
			$(this).removeClass("inactive");
			$(this).addClass("active");
			$(".main-menu-sub-inner1").stop().slideToggle(250);
		}
	});
	
	$(".main-menu-sub-inner1 a").hover(function(){
		$(this).find("img").eq(0).fadeOut(250);
		$(this).find("img").eq(1).fadeIn(250);
	}, function(){
		$(this).find("img").eq(0).fadeIn(250);
		$(this).find("img").eq(1).fadeOut(250);
	});
and this is my css
Code:
.testing {
	position: relative;
}

.testing li {
	list-style: none;
	float: left;
}

.testing a:hover {
	color: #43b6cf;
}

.testing a {
	color: #ffffff;
	text-decoration: none;
	margin: 0 25px 0 0;
	padding: 10px 0;
	display: block;
}