custom navigation inline

<nav id="navigation" class="navigation">

	     <ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog-style-1.html">Blog</a>
		<ul>
<li><a href="blog-style-1.html">Blog Page</a></li>
<li><a href="blog-style-2.html">Alternative Blog Page</a></li>
<li><a href="single-post.html">Blog Single</a></li>
		</ul>
	       </li>
				<li><a href="events.html">Events</a>
					<ul>
						<li><a href="events.html">Events Page</a></li>
						<li><a href="single-events.html">Detailed Event</a></li>
					</ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="elements.html">Features</a>
					<ul>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="columns.html">Columns</a></li>
						<li><a href="sidebar-left.html">Sidebar Left</a></li>
					</ul>
				</li>
				<li><a href="contacts.html">Contact</a></li>
			</ul> -->
			</nav><!--/ #navigation-->

css:

/*	Main Navigation
	/* -------------------------------------------------- */

	.navigation {
		clear: both;
		padding: 0 20px;
		height: 60px;

	}

	.style-1 .navigation,
	.style-2 .navigation {background-color: #d9dadb;}

	.style-3 .navigation,
	.style-4 .navigation,
	.style-5 .navigation {background-color: #cacbcc;}
	.style-6 .navigation {background-color: #4a5063;}

			.navigation > ul > li {
				position: relative;
				float: left;
				margin: 0;
				list-style: none;
			}

			.ie7 .navigation > ul > li {height: 60px;}

				.navigation > ul > li > a {
					position: relative;
					display: block;
					padding: 0 30px;
					text-align: left;
					text-transform: uppercase;
					font-size: 12px;
					font-family: 'Adamina', serif;
					vertical-align: top;
					line-height: 60px;
				}

				.ie7 .navigation > ul > li > a {height: 60px;}

				.style-1 .navigation > ul > li > a {color: #124162;}
				.style-2 .navigation > ul > li > a,
				.style-3 .navigation > ul > li > a,
				.style-4 .navigation > ul > li > a,
				.style-5 .navigation > ul > li > a {color: #373a3c;}
				.style-6 .navigation > ul > li > a {color: #fff;}

				.navigation .rightarrowclass {
					position: absolute;
					top: 50%;
					right: 10px;
					margin-top: -3px;
					width: 3px;
					height: 7px;
					background: url(../images/nav-arrow.png) no-repeat;
				}

					.navigation > ul > li:hover > a,
					.navigation > ul > li.current > a {color: #fff;}

					.style-1 .navigation > ul > li:hover > a,
					.style-1 .navigation > ul > li.current > a,
					.style-1 .dropcapspot,
					.style-1 #back-top,
					.style-1 .pagination .current {background-color: #549ec8;}

					.style-2 .navigation > ul > li:hover > a,
					.style-2 .navigation > ul > li.current > a,
					.style-2 .dropcapspot,
					.style-2 #back-top,
					.style-2 .pagination .current {background-color: #e53535;}

					.style-3 .navigation > ul > li:hover > a,
					.style-3 .navigation > ul > li.current > a,
					.style-3 .dropcapspot,
					.style-3 #back-top,
					.style-3 .pagination .current {background-color: #79b027;}

					.style-4 .navigation > ul > li:hover > a,
					.style-4 .navigation > ul > li.current > a,
					.style-4 .dropcapspot,
					.style-4 #back-top,
					.style-4 .pagination .current {background-color: #eba505;}

					.style-5 .navigation > ul > li:hover > a,
					.style-5 .navigation > ul > li.current > a,
					.style-5 .dropcapspot,
					.style-5 #back-top,
					.style-5 .pagination .current {background-color: #3b5381;}

					.style-6 .navigation > ul > li:hover > a,
					.style-6 .navigation > ul > li.current > a,
					.style-6 .dropcapspot,
					.style-6 #back-top,
					.style-6 .pagination .current {background-color: #75a9c7;}

				/* Dropdown */

				.navigation > ul > li:hover > ul {padding-top: 1px;}

				.navigation li:hover > ul {
					display: block;
					top: 59px;
					visibility: visible;
				}

				.navigation ul ul {
					position: absolute;
					left: 0;
					top: 70px;
					z-index: 99;
					padding: 0;
					width: 169px;
					display: none;
				}

				.not-ie .navigation ul ul {
					-webkit-transition: all .2s ease-in-out;
					   -moz-transition: all .2s ease-in-out;
					    -ms-transition: all .2s ease-in-out;
					  	 -o-transition: all .2s ease-in-out;
							transition: all .2s ease-in-out;
				}

				.navigation ul > li:hover ul li:hover ul {
					left: 170px;
					display: block;
				}

					.navigation ul ul li {position: relative;}

					.ie7 .navigation ul ul li {height: 34px;}

					.navigation ul ul li:last-of-type > a {border-bottom: none;}

						.navigation ul ul a {
							display: block;
							padding: 9px 10px;
							border-bottom: 1px solid #f2f3f4;
							background-color: #D9DADB;
							text-align: left;
							color: #124162;
							letter-spacing: 0;
							font-weight: 400;
							font-size: 12px;
							font-family: 'Adamina', serif;
						}

						.style-1 .navigation ul ul a {color: #124162;}
						.style-2 .navigation ul ul a {color: #373a3c;}

						.style-3 .navigation ul ul a,
						.style-4 .navigation ul ul a {
							border-bottom: 1px solid #e3e4e5;
							background-color: #cacbcc;
							color: #373a3c;
						}

						.style-5 .navigation ul ul a {
							border-bottom: 1px solid #e3e4e5;
							background-color: #cacbcc;
							color: #373a3c;
						}

						.style-6 .navigation ul ul a {
							border-bottom: 1px solid #676f88;
							background-color: #4a5063;
							color: #fff;
						}

						.navigation > ul ul li:hover > a,
						.navigation .active > a {color: #fff;}

						.style-1 .navigation > ul ul li:hover > a,
						.style-1 .navigation .active > a {background-color: #549EC8;}

						.style-2 .navigation > ul ul li:hover > a,
						.style-2 .navigation .active > a {background-color: #E53535;}

						.style-3 .navigation > ul ul li:hover > a,
						.style-3 .navigation .active > a {background-color: #79b027;}

						.style-4 .navigation > ul ul li:hover > a,
						.style-4 .navigation .active > a {background-color: #eba505;}

						.style-5 .navigation > ul ul li:hover > a,
						.style-5 .navigation .active > a {background-color: #3b5381;}

						.style-6 .navigation > ul ul li:hover > a,
						.style-6 .navigation .active > a {background-color: #75a9c7;}

						.navigation ul ul li:hover > a .rightarrowclass {background-position: 0 -19px;}

				/* Sub Dropdown */

				.navigation ul ul ul {
					left: 170px !important;
					top: 0 !important;
				}

				.not-ie .navigation ul ul ul {
					-webkit-transition: all .2s ease-in-out;
					   -moz-transition: all .2s ease-in-out;
					    -ms-transition: all .2s ease-in-out;
					  	 -o-transition: all .2s ease-in-out;
				}

		/* Nav Responsive  */

		.navigation .nav-responsive {
			display: none;
			margin: 15px 0;
			padding: 6px 8px;
			width: 68%;
			border-color: #ccc;
			background-color: #fff;
			background-image: url(../images/nav-bg.png);
			background-position: right center;
			background-repeat: no-repeat;
		}

can someone help me integrate the custom navigation ? i have this code
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?> for the menu to display and this one for functions.php

<?php
function register_my_menus() {
  register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );
?>

the only problem i have is that the menu is nost css styled :(( and it”s not displayed inline