Can an expert resolve this please?

Hello guys,
right now I have this navigation on the right of the page but I want it on top as the "result" image attachment shows.

I attach the CSS I have and also the HTML of that part.

Thanks for your help. I really need it!
Nat

<div id="main">
		<div id="navigation">
			<div id="nav1">
				<h2>Control panel</h2>
				<ul>
					<li><a href="/fileman.jsp">File manager</a></li>

					<li><a href="/user_db.jsp">mySQL Setup</a></li>
					<li><a href="/phpmyadmin/">PHPMyAdmin</a></li>
					<li><a href="/email_manager.jsp">Email Manger</a></li>
					<li><a href="/domain_manager.jsp">Domain Manager</a></li>
					<li><a href="/cron_manager.jsp">Cron Manager</a></li>
					<li><a href="/user_tickets.jsp">HelpDesk</a></li>

					<li><a href="/user_settings.jsp">Account settings</a></li>
					<li><a href="/user_apps.jsp">Addons</a></li>
					<li><a href="/user_stats.jsp" target="_blank">Real Time stats</a></li>
      					<li><a href="/user_stats_aw.jsp" TARGET="_blank">AW Stats</a></li>
					<li><a href="/hgupgrade.jsp">Upgrade Now!</a></li>
					<li><a href="/login.jsp?mode=logout">Logout</a></li>

				</ul>
			</div>

			<div align="center">
			(Next update in 5 hours 17 minutes.)</div>

		</div>
		<div id="content">
			<h2>User Control Panel:</h2>


			<p>
				<TABLE class=main_box_top>
<TR>
	<TD WIDTH="99%">

		<TABLE CLASS=ucp_info> and script continues.....

HTML:

CSS

div#main { background-color:#ffffff;}

#navigation{float:right;text-align:left;margin:;width:196px;margin:0 0 10px 15px;}
#navigation #nav1{margin:0 0 10px;width:100%;background:url(images/freehost_44.jpg') repeat-y center top;}
#navigation h2{padding:0 0 0 10px;color:#4C4C4C;font:bold 18px/48px arial;}
#navigation ul li{display:inline;}
#navigation #nav1 ul{padding:0 0 22px;height:1%;}
#navigation #nav1 ul li a{padding:0 0 0 15px;margin:5px;display:block;color:#FF0000;height:20px;font:normal 12px/20px arial;}
#navigation #nav1 ul li a:hover{color:#2463B7;background:#ffffff;}
#navigation #nav2 ul{height:1%;padding:0 0 10px;}
#navigation #nav2 ul li{margin:0 5px;padding:0 0 0 15px;color:#FFF;display:block;font:normal 12px arial;background:#A2D848;}
#navigation #nav2 ul li a{display:block;color:#4C4C4C;font:normal 18px arial;text-align:right;padding:15px 10px 0;}
#navigation #ad3{width:150px;height:60px;background:#FFF;margin:20px auto;}

HTML:

 

What I´m trying to resolve is the following:

Right now navigation is vertical like this:
1File manager
2mySQL Setup
3PHPMyAdmin
4Email Manger
5Domain Manager
6Cron Manager
7HelpDesk
8Account settings
9Addons
10Real Time stats
11AW Stats
12Upgrade Now!
13Logout

But I want it horizontal in 2 rows like this:

1 2 3 4 5 6

7 8 9 10 11 12 13


I appreciate any help!
Thanks
Nat

 

One way you could make it horizontal is to add "float:left" to the CSS of your li tags. Make sure you add a clear after #6 in order to get two rows. If you don't know how to do this just use the following CSS:

.clear {
    clear:both;
}

Code (markup):

Then all you do is just place a div with class="clear" after #6.

Another way is to take out the lists all together and just place the links one after another in the HTML. Then just add a line break after #6 to get the second row.

I recommend the CSS way since you already have the list structure set up.