Navigation Menu / Top Menu Expand

[AFPoster]

I'm using Coda to alter the code to a Photoshop (.psd) layout.

I've attached an image for guidance along with a few lines of code that you can hopefully help me with.

I want to add a 6th menu on the list but it keeps scrunching up my page and pushing everything else down.

Page:

<div id="container">
  <div id="main_panel">
    <div class="main_center">
      <div id="main_top_panel">
        <div id="main_top_logo_panel">
          <div class="logo">
            <h1><a href="#"><img src="images/PlanToolsLogocopy.jpg" alt="" border="0" /></a></h1>
          </div>
        </div>
        <div id="navigation_panel">
          <div id="topmenu">
                          <ul>
                <li><a href="index.html"><span>Home</span> </a></li>
                <li><a href="about.html" class="over"><span>About</span></a></li>
                <li><a href="services.html"><span>Solutions</span></a></li>
                <li><a href="support.html"><span>Alliance Partners</span></a></li>
                <li><a href="News.html"> <span>News</span></a></li>
                <li><a href="Resources.html"> <span>Resources</span></a></li>
                <li style=" background:none;"><li><a href="contact-us.html"><span> Contact</span></a></li>
             </ul>
            
            <div class="clear"></div>
          </div>

CSS:

#main_panel {clear:both;}
#main_top_panel { clear:both;}
#main_top_panel { clear:both; height:65px; 	 } 
#main_top_logo_panel {float:left; width:250px;}
.logo {margin:0px; padding:10px 0px 0px 0px; float:left;}
.logo h1{margin:0px; padding:0px; font-size:26px; font-weight:normal; color:#000;}


#navigation_panel {float:right; width:530px;}
#topmenu { margin:0px; padding:30px 0px 0px 0px; }
#topmenu ul {margin:0px; padding:0px;}

#topmenu ul li { display:block; float:left;  background:url(../images/nav_line.gif) right  no-repeat;	list-style:none;}

#topmenu li a {
	font:bold 12px Arial, Helvetica, sans-serif;
	color:#9199a7;
	text-decoration:none;
	text-transform:capitalize;
	display:block; 
	float:left; 	
	
	padding:0px 1px 0px 2px;
}

#topmenu li a span {
	display:block;
	float:left;
	padding:10px 20px 10px 20px; 
	cursor:pointer;
	
}

 

[AFPoster]

As you can see in the 2nd image everything is pushed down. So is their anyway to allow a 6,7 and 8th menu item without pushing anything down? Looking to make a clean bar all the way across.