title: css drop down menu positioned incorrectly
body: <p>Hi guys this is my CSS code for a drop down menu:</p>
  
  <pre><code>#nav {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background-color:#60625C;
  bottom:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  position:absolute;
  z-index:1;
  }
  #nav, #nav ul {
  line-height:40px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  width:100%;
  }
  #nav a, #nav a:hover {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  border:medium none;
  display:block;
  text-decoration:none;
  }
  #nav li {
  float:left;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  border-right:1px solid #6E7073;
  }
  #nav a, #nav a:visited {
  color:#FFFFFF;
  display:block;
  padding:0 20px;
  }
  #nav a:hover, #nav a:active, .current_page_item a, #home .on {
  text-decoration:none;
  }
  #nav li ul {
  border-bottom:1px solid #6E7073;
  height:auto;
  left:-999em;
  line-height:30px;
  margin:0;
  padding:0;
  position:absolute;
  width:222px;
  }
  #nav li li {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#1E1F21 none repeat scroll 0 0;
  border-left:1px solid #6E7073;
  border-right:1px solid #6E7073;
  border-top:1px solid #6E7073;
  width:220px;
  }
  #nav li li a, #nav li li a:visited {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#1E1F21 none repeat scroll 0 0;
  color:#FFFFFF;
  font-size:0.9em;
  font-weight:normal;
  }
  #nav li li a:hover, #nav li li a:active {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#60625C none repeat scroll 0 0;
  }
  
  #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left:auto;
  }
  </code></pre>
  
  <p>However the menu is being placed in an unwanted position at the bottom of the screen.</p>
  
  <p><img src="https://i.stack.imgur.com/rSHMj.png" alt="enter image description here"></p>
  
  <p>How can I make it display between the title and main content of the blog?</p>
  
  <p><img src="https://i.stack.imgur.com/8XVq7.png" alt="enter image description here"></p>
  
  <p>This is the code relating to the navigation in 'header.php'</p>
  
  <pre><code>&lt;div id="navbar"&gt;
  &lt;div id="nav"&gt;      
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;?php wp_list_pages('title_li=&amp;depth=0&amp;sort_column=menu_order&amp;exclude=56'); ?&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Many thanks in advance.</p>