Hey all,

I'm using this menu where the subitems appear under the main items, right under it below eachother, floating towards the right. (see here). But how can I have the subitems show up under the main items, but centralized, so that all subitems are horizontal next to eachother under the main menu, and not start showing up right under the main item it is part of?
This is the css of the menu:

Code:
#primary-menu {
	float: right;
	margin: 0;
	padding: 0;
}
#primary-menu select {
	display:none;
}
#primary-menu select {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #eee;
    cursor: pointer;
    width: 100%;
	padding: 7px;
	margin: 38px 0;
	box-shadow:0 0 0 rgba();
	-moz-box-shadow:0 0 0 rgba();
	-webkit-box-shadow:0 0 0 rgba();
	color: #676767;
}
#primary-menu ul {
	margin: 0;
	padding: 30px 0;
	list-style-type: none;
	float: right;
}
#primary-menu ul li:hover { 
	visibility: inherit; 
}
#primary-menu ul li a.logo {
	display: none;
	margin: 0;
}
#primary-menu ul li {
	position: relative;
	display: inline;
	float: left;
	margin: 0 0 0 -1px;
	background: url(http://lichaamengeest.be/img/sprite.png) no-repeat scroll right -153px transparent;
}
#primary-menu ul li:last-child {
    background: none;
}
#primary-menu ul li a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 13px;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	color: #676767;
	padding: 17px 15px;
	float: left;
	display: block;
}
#primary-menu ul li a:hover, #primary-menu ul li.sfHover a {
	background-color: #444;
	color: #fff;
}
#primary-menu ul li a.current {
	color: #fff;
}
#primary-menu ul ul {
	position: absolute;
	top: -9999em;
	width: 130px;
    background: #444; 
	z-index: 9999;
}
#primary-menu ul ul li { 
	width: 100%; 
}
#primary-menu ul li:hover ul {
	left: 0;
	top: 51px;
}
#primary-menu ul li:hover li ul { 
	top: -9999em; 
}
#primary-menu ul li li:hover ul {
	left: 180px;
	top: 0;
}
#primary-menu ul ul {
	padding: 0;
	margin: 0;
}
#primary-menu ul ul li {
	margin: 0;
	background: none;
	border-bottom: 1px solid #555;
}
#primary-menu ul ul li:last-child {
	border-bottom: none;
}
#primary-menu ul ul li a {
	font-size: 11px;
	padding: 12px 15px;
}
#primary-menu ul li:hover ul li a { 
    color: #999;    
}
#primary-menu ul li:hover ul li a:hover { 
    color: #fff; 
}
.fixed { position: fixed; top: 0px; background-color: #f8f8f8; z-index:999; height: 59px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); }
#header-wrapper .fixed { }
.fixed .header { border-bottom: none; }
.fixed #logo { display:none; }
.fixed .logo2 { position:absolute; left: 0px; top:12px; }
.fixed #primary-menu ul { padding: 0; }
.fixed #primary-menu ul li { background: url(http://www.lichaamengeest.be/img/sprite.png) no-repeat scroll right -149px transparent; }
.fixed #primary-menu ul li:last-child {  background: none; }
.fixed #primary-menu ul li a { color: #676767; padding: 21px 15px; }
.fixed #primary-menu ul li a:hover, .fixed #primary-menu ul li.sfHover a {	background-color: #444;	color: #fff; }
.fixed #primary-menu ul li a.current { color: #fff; }
.fixed #primary-menu ul li:hover ul { top: 59px; }
.fixed #primary-menu ul ul li { background: none; }
.fixed #primary-menu ul li:hover ul li a { padding: 12px 15px; background: #444; color:#999; }
.fixed #primary-menu ul li:hover ul li a:hover { color:#fff; }
Any help will be highly appreciated. Thanks.