How do I completely make my navigation bar horizontal

See more:

CSS

HTML

Hi, I'm busy working on my portfolio website using HTML and CSS. For my drop down navigation bar I watched a tutorial which gave me a pretty cool result, the only thing I want to change is the way the sub elements in the navigation bar drop down. At this moment they drop down vertically but I want them horizontal and right underneath the other links. Who can help me? The <style> part looks probably incredibly messy, sorry for that!

<style>


.vastmenu{
	position: fixed;
	margin-left: 25%;
	margin-right: auto;
	margin-top: 0px;
	width: 100%;
}

/*rules for navigatie menu*/
#navmenu {
	max-width: 100%; /*zodat het blok groot (klein) genoeg is om te centreren*/
	margin-left: auto; /*eerst testen voordat je de volgende regel typt; blok verschuift zoveel mogelijk naar rechts*/
	margin-right: auto; /*deze drukt de box weer terug naar links, samen met margin-left drukken ze het blok naar het midden. Centreren dus!*/
	margin-top: -15px;
}

ul#navmenu, ul.sub1{
	list-style-type: none;
	margin-right: auto;
	margin-left: auto;
	font-size: 12pt;
}

ul#navmenu li{
	/*outline: 1px solid red;*/
	margin-right: auto;
	margin-left: auto;
	width: auto;
	text-align: center;
	position: relative;
	float: left;
	margin-right: 5px;
}

ul#navmenu a{
	text-decoration: none;
	position: relative;
	display: block;
	width: 150px;
	height: 35px;
	line-height: 25px;
	border-radius: 2px;
	float: left;
}

ul#navmenu .sub1 a{
	margin-top: 0px;

}

ul#navmenu li:hover >a {
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
}

ul#navmenu li:hover a:hover{
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
}

ul#navmenu ul.sub1{
	display: none;
	position: absolute;
	float: left;
	top: 25px;
	left: 0px;
}

ul#navmenu li:hover .sub1{
	display: block;
}


</style>



&lt;!--<div class="vastmenu"><ul id="navmenu">
 	<li><a href="#">//link1</a></li>
 	<li><a href="#">//link 2</a>
 		<ul class="sub1">
 			<li><a href="#">sublink2.1</a>
 			<li><a href="#">sublink2.2</a>
 			<li><a href="#">sublink2.3</a>
 		</li></li></li></ul>
 	</li>
 	<li><a href="#">//link3</a>
 		<ul class="sub1">
 			<li><a href="#">sublink3.1</a>
 			<li><a href="#">sublink3.2</a>
 			<li><a href="#">sublink3.3</a>
 			<li><a href="#">sublink3.4</a>
 		</li></li></li></li></ul>
 	</li>
 	<li><a href="#">//link4</a>
 		<ul class="sub1">
 			<li><a href="#">sublink4.1</a>
 			<li><a href="#">sublink4.2</a>
 			<li><a href="#">sublink4.3</a>
  			<li><a href="#.html">sublink4.4</a>
 			<li><a href="#">sublink4.5</a>
 		</li></li></li></li></li></ul>
 	</li>
 	<li><a href="#">//link5</a>
			<ul class="sub1">
 			<li><a href="#">sublink5.1</a>
 			<li><a href="#">sublink5.2</a>
 			<li><a href="#">sublink5.3</a>
 		</li></li></li></ul>
 	</li></ul></div>
--&gt;</pre>