Ive been having a lot of trouble lining up this slide down menu with Jquery. But im sure the problem is in the css. Go to the site click on the More button in the menu. The menu is right where i want it but then it jolts up.

Game Junkie

Here's my code

index.php:
Code HTML4Strict:
<?php
 
include 'functions.php';
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Game Junkie</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#more_con {
	width:776px;
	height:150px;
	margin:12px 12px 0px 12px;
	position:relative;
	background-color:#0076AE;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	display:none;
}
</style>
</head>
<body>
<div id="page">
  <!-- Start:Page Banner -->
  <div id="top">
    <div class="back">&nbsp;</div>
    <div class="content">
      <p>Game Junkie</p>
    </div>
  </div>
  <!-- End:Page Banner -->
  <!-- Start:Bottom -->
  <div id="bottom">
    <div class="trans">&nbsp;</div>
    <div id="menu">
      <ul id="nav">
        <li><a href="category.php?value=action">Action</a></li>
        <li><a href="category.php?value=adventure">Adventure</a></li>
        <li><a href="category.php?value=arcade">Arcade</a></li>
        <li><a href="category.php?value=puzzle">Puzzle</a></li>
        <li><a href="category.php?value=simulation">Simulation</a></li>
        <li><a href="category.php?value=sports">Sports</a></li>
        <li><a href="category.php?value=strategy">Strategy</a></li>
        <li class="last"><a id="more_btn" onclick="$('#more_con').slideToggle(2000);">More</a></li>
      </ul>
    </div>
    <div id="more_con">More</div>
    <div class="content">
      <div style="float:left;width:582px;">
        <div id="section" style="width:582px;">
          <div id="header">New Games</div>
          <?php $query = mysql_query("SELECT * FROM games ORDER BY date DESC") or die(mysql_error());
 
			$i = 0;
 
			while($games = mysql_fetch_array($query)){
 
				$loc = explode(".", $games['swf']);
 
				if($i < 9){?>
          <div id="icon" onmouseover="this.style.backgroundColor='#333'" onmouseout="this.style.backgroundColor='#222'" onclick="document.location.href='play.php?game=<?php echo $games['id']; ?>'">
            <table border="0px" cellpadding="0px" cellspacing="0px" style="width:100%;">
              <tr>
                <th colspan="2"><?php echo $games['name']; ?></th>
              </tr>
              <tr>
                <td style="width:75px;"><img style="height:75px;border:1px solid black;" src="file_database/<?php echo $loc[0]; ?>.jpg" /></td>
                <td style="width:100%;font-size:9px;font-family:Verdana, Geneva, sans-serif;text-align:left;vertical-align:text-top;"><?php echo truncateString($games['description'], 100); ?>&nbsp;</td>
              </tr>
            </table>
          </div>
          <?php $i++;
 
				}
 
			}?>
        </div>
        <div id="section" style="width:582px;">
          <div id="header">Top Games</div>
          <?php $query = mysql_query("SELECT * FROM games ORDER BY total_plays DESC") or die(mysql_error());
 
			$i = 0;
 
			while($games = mysql_fetch_array($query)){
 
				$loc = explode(".", $games['swf']);
 
				if($i < 9){?>
          <div id="icon" onmouseover="this.style.backgroundColor='#333'" onmouseout="this.style.backgroundColor='#222'" onclick="document.location.href='play.php?game=<?php echo $games['id']; ?>'">
            <table border="0px" cellpadding="0px" cellspacing="0px" style="width:100%;">
              <tr>
                <th colspan="2"><?php echo $games['name']; ?></th>
              </tr>
              <tr>
                <td style="width:75px;"><img style="height:75px;border:1px solid black;" src="file_database/<?php echo $loc[0]; ?>.jpg" /></td>
                <td style="width:100%;font-size:9px;font-family:Verdana, Geneva, sans-serif;text-align:left;vertical-align:text-top;"><?php echo truncateString($games['description'], 100); ?>&nbsp;</td>
              </tr>
            </table>
          </div>
          <?php $i++;
 
				}
 
			}?>
        </div>
      </div>
      <div class="ad_1" style="float:right;">
        <table cellpadding="0" border="0" cellspacing="0" style="background-color:#900;height:600px;width:160px;">
          <tr>
            <td>ad</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <!-- End:Bottom -->
</div>
</body>
</html>

style.css:
Code CSS:
/* Start:Cross-Page Styles */
html {
	border:0px;
	margin:0px;
	outline:0px;
	padding:0px;
	cursor:default;
}
body {
	background-image:url(images/back.jpg);
	background-color:#111;
	background-repeat:repeat;
	background-position:right top;
	color:#fff;
	font:12px Arial Black, Gadget, sans-serif;
}
a {
	color:#000;
}
#page {
	position:relative;
	text-align:center;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	border:0px;
	outline:0px;
	padding:0px;
}
/* Start: Banner */
#top {
	width:800px;
	height:75px;
	position:relative;
	float:left;
	overflow:hidden;
	margin:0px 0px 16px 0px;
}
#top .back {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:75px;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#top .content {
	position:relative;
}
#top .content p {
	color:#069;
	font-size:24px;
	text-shadow: 0px -1px 0px #111;
}
/* End: Banner */
/* Start: Menu */
#menu {
	text-align:center;
	width:100%;
	height:auto;
	position:relative;
	display:block;
}
#nav {
	width:100%;
	height:34px;
	float:left;
	display:block;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding:0px;
	list-style:none;
	background-color:#069;
	color:#000;
	font:13px Arial Black, Gadget, sans-serif;
}
#nav li {
	float:left;
	display:block;
}
#nav li a {
	display:block;
	padding:8px 22px;
	text-decoration:none;
	font-weight:bold;
}
#nav li a:hover {
	background-color:#0076AE;
}
#nav li.last {
	float:none;
	overflow:hidden;
}
/* End: Menu */
/* Start: Bottom */
#bottom {
	width:800px;
	height:100%;
	position:relative;
	float:left;
	overflow:hidden;
}
#bottom .trans {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#bottom .content {
	position:relative;
	padding:12px;
}
/* End: Bottom */
#section {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 0px 8px;
	overflow:auto;
	margin-right:12px;
	margin-bottom:12px;
}
#icon {
	text-align:center;
	background:#222;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
	margin-right:8px;
	margin-bottom:8px;
	padding:3px;
	width:180px;
	cursor:pointer;
}
#header {
	text-align:left;
	padding:0px 25px 0px 3px;
	background:#069;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	clear:right;
	margin-bottom:8px;
	position:relative;
	left:-8px;
	color:#000;
	font:18px Arial Black, Gadget, sans-serif;
	height:26px;
	width:auto;
}
#game {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	padding:8px;
	overflow:hidden;
	clear:right;
	margin:auto;
	margin-bottom:12px;
}
#info {
	text-align:center;
	background:#111;
	width:728px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 8px 8px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
/* End:Cross-Page Styles */
/* Start: Ads */
.ad_1 {
	text-align:center;
	background:#111;
	width:160px;
	height:600px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	margin-bottom:12px;
}
.ad_2 {
	text-align:center;
	background:#111;
	width:728px;
	height:90px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
.ad_3 {
	text-align:center;
	background:#222;
	width:300px;
	height:250px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:5px;
	clear:right;
}
/* End: Ads */