title: How can I move this navigation bar down without moving the entire container down with it
body: <p>I'm trying to move the transparent navigation box down to the bottom of the container, but every time I add margin-top to #navigation it moves the entire container downwards with it.</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;About Me&lt;/title&gt;
  &lt;link href="../css/stylesheet.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;div id="navigation"&gt;
  &lt;ul&gt;
  &lt;li class="buttons"&gt;About&lt;/li&gt;
  &lt;li class="buttons"&gt;Experience&lt;/li&gt;
  &lt;li class="buttons"&gt;Websites&lt;/li&gt;
  &lt;li class="buttons"&gt;School&lt;/li&gt;
  &lt;li class="buttons"&gt;Future&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!--end of navigation--&gt;
  &lt;/div&gt;&lt;!--end of container--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  body {
  background: #5D5D5D;
  }
  
  #container {
  width:1200px;
  height:800px;
  position:relative;
  margin:auto;
  background-color:#B5B5B5;
  border-radius:200px;
  }
  
  #navigation ul li {
  list-style-type:none;
  display:inline-table;   
  }
  
  
  
  .buttons {
  width:100px;
  height:100px;
  background: #D1D1D1;
  border-radius:200px;
  -webkit-border-radius:200px;
  line-height:100px;
  text-align:center;
  margin-right:10px;
  box-shadow:0 3px 3px 3px rgba(0,0,0,0.15);
  margin-top:7px;
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
  border: 3px solid #D1D1D1;
  }
  
  .buttons:hover {
  background: #DFDFDF;
  cursor:pointer;
  border: 3px dotted #515151;
  }   
  
  #navigation {   
  background: rgba(0,0,0,0.15);
  width:700px;
  height:120px;
  border-radius:50px;
  text-align:center;
  }
  </code></pre>
  
  <p>JSFIDDLE link: <a href="http://jsfiddle.net/RX94a/" rel="nofollow">http://jsfiddle.net/RX94a/</a></p>