title: My CSS navigation bar won't move up or down, and break when I try to
body: <p>I'm new to HTML and CSS, I started like a week ago, and now I'm having trouble moving this navigation bar I generated with a website. When I try to use <code>margin-bottom</code> or <code>margin-top</code>, the whole navigation bar completely extends, but doesn't move. I've tried using <code>position: absolute</code> and try to set the postition like that, but then completely collapses, but it does seem to move.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="mainmenu"&gt;
   &lt;ul&gt; 
   &lt;li&gt;&lt;a class=current href="/index.html"&gt; Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="/lesmiserbales.html"&gt;Les Miserables&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="/chicago.html"&gt;Chicago&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="/shrek.html"&gt;Shrek&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="/phtanomoftheopera.html"&gt;Phantom Of The Opera&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="/wicked.html"&gt;Wicked&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="tickets.html"&gt;Tickets&lt;/a&gt;&lt;/li&gt; 
   &lt;li&gt;&lt;a  href="/htfs.html"&gt;How To Find Us&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  href="/contactus.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.mainmenu a {
  
  color: #ffffff;
  border: 0px solid;
  background-color: #302E2E;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
  font: 12px Arial;
  font-weight: normal;
  text-decoration: none;
  border-color: #000000;
  display: block;
  margin: 0px;
  width: 100px;
  text-align: left;
  z-index:2;
  position: absolute;
  top: 50px;
  }
  
  .mainmenu a:visited { color: #ffffff; }
  
  .mainmenu a:hover {
  border: 0px solid;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
  background-color: #333030;
  border-color: #000000;
  color: #000000;
  font: 12px Arial;
  font-weight: normal;
  text-decoration: none;
  text-align: left;
  display: block;
  width: 100px;
  
   }
  
  
   .mainmenu ul {
  list-style:none;
  margin: 0;
  padding: 0;
  
   }
  
  .mainmenu li {
  
  margin: 0;
      padding-top: 1px;
  padding-bottom: 1px;
  }
  </code></pre>
  
  <p>Any help would be appreciated, and sorry if I made a rookie mistake or something</p>