title: Drop down menu not displaying vertically under main menu
body: <p>Right then... I created a menu which worked perfectly fine but afterwards found out I needed to add drop-down which I done but for some reason it is showing horizontally and aligning itself to the left instead of being vertical and aligning itself underneath the link you hover over. What's annoying is that I did create one that worked perfectly fine on another site, I have tried to match up to coding from the last one to this one but as they are styled differently it is not going well.</p>
  
  <p>The html for the menu is:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="header"&gt;
      &lt;div id="menu_container"&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="overview.html"&gt;Overview&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="strategy.html"&gt;Strategy&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="marketing.html"&gt;Marketing&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="team_and_management.html"&gt;Team and Management&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="edgbaston.html"&gt;Edgbaston&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="hockley.html"&gt;Hockley&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="selly_oak.html"&gt;Selly Oak&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="contact_us.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>nav ul {
      list-style: none;
      text-align: center;
      position: relative;
      display: inline-table;
  }
  
  nav ul li {
      display: inline;
  }
  
  nav ul li a:link, nav ul li a:visited {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 14px;
      font-weight: normal;
      width: 800px;
      color: #FFFFFF;
      line-height: 14px;
      margin: 0px 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #FFFFFF;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
  }
  
  nav ul li a:hover, nav ul li a:active {
      border-color: #f9cf19;
  }
  
  nav li ul {
      display: none;
      z-index: 999;
  }
  
  nav li:hover ul {
      display: block;
      position: absolute;
  }
  
  nav li:hover li a:hover {
      background: #000000;
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thanks guys.</p>
  
  <p>Edit: Here is a link to the site: <a href="http://vicarage-support.com/our_hostels.html" rel="nofollow">http://vicarage-support.com/our_hostels.html</a></p>
  
  <p>The link is only on that page, once I have it working and the page finished I will add it to the others.</p>
  
  <p>And one to a fiddle: <a href="http://jsfiddle.net/e7y6U/" rel="nofollow">http://jsfiddle.net/e7y6U/</a></p>