title: How to move the dropdown menu (CSS)?
body: <p>I have to make a website for school (ICT class), and I made a dropdown menu with CSS (with some youtube help). Now I want to move my menu down so I can place a banner above the menu.</p>
  
  <p>I can move everything except for the blue background.
  I moved it by doing this:</p>
  
  <pre><code>#nav ul{
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: relative;
      top: 50px;
      }
  </code></pre>
  
  <p>Does anybody know how to move everything at once or just move the blue background?</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-family: Arial;
    font-size: 18px
  }
  #nav {
    background-color: #0000FF;
  }
  #nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
  }
  #nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    top: 50px;
  }
  #nav ul li {
    display: inline-block;
  }
  #nav ul li:hover {
    background-color: #0066FF;
  }
  #nav ul li a,
  visited {
    color: #ccc;
    display: block;
    padding: 15px;
    text-decoration: none;
  }
  #nav ul li a:hover {
    color: #ccc;
    text-decoration: none;
  }
  #nav ul li:hover ul {
    display: block;
  }
  #nav ul ul {
    display: none;
    position: absolute;
    background-color: #0066FF;
    border: 5px solid #0000FF;
    border-top: 0;
    margin-left: -5px;
  }
  #nav ul ul li {
    display: block;
  }
  #nav ul ul li a,
  visited {
    color: #ccc;
  }
  #nav ul ul li a:hover {
    color: #099;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Homepage&lt;/title&gt;
  
    &lt;link href="CSS/menu.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="nav"&gt;
      &lt;div id="nav_wrapper"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Homepage&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje1a&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje2a&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje3a&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Pagina2&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje2b&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje2b&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje2b&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Pagina3&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje1c&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje2c&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kopje3c&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't post images cause this is my first post and I don't have more then 10 reputation, I'm sorry.</p>
  
  <p>Criticism is always welcome,
  Hating is not.</p>