Styling a drop down menu

Hello, I’m creating my own template & I’ve coded a jQuery drop down menu that works statically but now I’m trying to make it dynamic the css is messed up. The drop down works but the menu doesn’t displaying correctly.

The main menu is vertical instead of horizontal & the secondary menu is horizontal, instead of vertical. Also the type for the main menu isn’t displaying.

I hope I’m explaining myself thoroughly, this is my first attempt at a template & all has been well until the navigation. If you need anymore information please let me know, thanks.

This is the working static html

<div class="box">
			<ul id="ldd_menu" class="ldd_menu">
				<li>
					<span>Menu</span>

                  <div class="ldd_submenu">
						<ul>
							<li class="ldd_heading">About Us</li>
							<li><a href="#">Our Visions</a></li>
							<li><a href="#">Our History</a></li>
							<li><a href="#">Our People</a></li>
							<li><a href="#">Recruit</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">Festivals</li>
							<li><a href="#">Current</a></li>
							<li><a href="#">Development</a></li>
                            <li><a href="#"></a></li>
							<li><a href="#"></a></li>
						</ul>
                        <ul>
							<li class="ldd_heading">Site</li>
							<li><a href="#">Current</a></li>
							<li><a href="#">Development</a></li>
                            <li><a href="#"></a></li>
							<li><a href="#"></a></li>
						</ul>
                         <ul>
							<li class="ldd_heading">Pathways</li>
							<li><a href="#">Current</a></li>
							<li><a href="#">Development</a></li>
                            <li><a href="#"></a></li>
							<li><a href="#"></a></li>
						</ul>
						<ul>
							<li class="ldd_heading">Work With You</li>
							<li><a href="#">Work Shops</a></li>
							<li><a href="#"></a></li>
                            <li><a href="#"></a></li>
							<li><a href="#"></a></li>
						</ul>
                        <ul>
							<li class="ldd_heading">News</li>
                              <li><a href="#">Latest Updates</a></li>
							<li><a href="#"></a></li>
                            <li><a href="#"></a></li>
							<li><a href="#"></a></li>
						</ul>
                        <ul>
							<li class="ldd_heading">Donate</li>
                              <li><a href="#">Helping Us</a></li>
							<li><a href="#"></a></li>
                            <li><a href="#"></a></li>
							<li><a href="#"></a></li>
						</ul>
                        <ul>
							<li class="ldd_heading">Contact</li>
                              <li><a href="#">Finding Us</a></li>
							<li><a href="#">Email</a></li>
                            <li><a href="#">Facebook</a></li>
							<li><a href="#">Twitter</a></li>
						</ul>
						<a class="ldd_subfoot" href="#"> Accessibility Link</a>
					</div>
				</li>
			</ul>
		</div>

        <div></div>

& here is the css

/* =============================================================================
NAVIGATION
========================================================================== */

ul.ldd_menu{
	margin:0px;
	padding:0;
	display:block;
	height:50px;
	list-style:none;
	font-family:"Trebuchet MS", sans-serif;
	text-align: center;
}
ul.ldd_menu a{
	text-decoration:none;
}
ul.ldd_menu > li{
	float:left;
	position:fixed;
	width: 100%;
	z-index: 9999;
}
ul.ldd_menu > li > span{
	float:right;
	color:#CCC;
	background-color:#333333;
	height:50px;
	line-height:50px;
	cursor:default;
	padding:0px 20px;
	text-shadow:0px 0px 1px #CCC;
	}

.sub_wrap{
	width: 2500px;
	margin: 0 auto 0 auto;
	background-color: #000;
}

ul.ldd_menu ul{
	list-style:none;
	display: inline-block;
	border-left:1px dotted #FFF;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 10px;
}

ul.ldd_menu .ldd_submenu{
	position:absolute;
	top:50px;
	width:100%;
	display:none;
	opacity:0.90;
	font-size:10px;

	background-color: #000;
}
a.ldd_subfoot{
	background-color:#f0f0f0;
	color:#444;
	display:block;
	clear:both;
	padding:15px 20px;
	font-family: Arial, serif;
	font-size:10px;
	text-shadow:0px 0px 1px #fff;
	-moz-box-shadow:0px 0px 2px #777 inset;
	-webkit-box-shadow:0px 0px 2px #777 inset;
	-box-shadow:0px 0px 2px #777 inset;
}

li.ldd_heading{
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color:#FF3300;
	text-shadow:0px 0px 1px #B03E23;
	padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
	font-family: Arial, serif;
	font-size:12px;
	line-height:20px;
	color:#fff;
	padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
	background:#FF3300;
}

In my template

This is my code

<div class="box">
			<ul id="ldd_menu" class="ldd_menu">
				<li>
					<span>Menu</span><!-- Increases to 510px in width-->

 <div class="sub_wrap">

                  <div class="ldd_submenu">
						<nav>
							<li class="ldd_heading"></li><?php wp_nav_menu(array('menu' => 'main_nav')); ?>
							</nav>
						<a class="ldd_subfoot" href="#"> Accessibility Link</a>
					</div>
				</li>
			</ul>
		</div>

        <div></div>