title: Vertical Menu Submenu CSS Alignment
body: <p>I have a vertical menu and need a submenu to pop out. I've got everything working except my sub menu doesn't align where it should horizontally. Instead, it jumps up against the header div above. Any help would be appreciated.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="leftcontainer"&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="#"&gt;History&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Packaging&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt; 
         &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;  
     &lt;/ul&gt;
   &lt;/li&gt;  
  &lt;li&gt;&lt;a href="#"&gt;Transportation&lt;/a&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;&lt;/li&gt;  
     &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Warehousing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Design&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Real Estate&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.container {
            width: 960px;
            height:740px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
            padding-bottom: 10px;
            position: relative;
            overflow: auto;
            box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
        }
  
        body {
            font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-image: url(../img/body-bg);
            background-repeat: repeat-x;
        }
  
        .leftcontainer {
            float: left;
            width: 160px;
            height: 650px;
            display: inline-block;
            background-image: url(../img/nav-div-bg.png);
            background-repeat: repeat-y;
            margin-bottom: 0px;
            clear: both;
            position: absolute;
            z-index: 999;
        }
  
        ul li {
            text-decoration: none;
            list-style-type: none;
            margin-left: -40px;
            text-align: left;
            display: block;
        }
  
        ul {
            margin-top:0px;
            margin-bottom: 0px;
            list-style-type: none;
        }
  
        ul li a:link {
            text-decoration: none;
            list-style-type: none;
            color: #FFF;
            display: block;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            font-size: 16px;
        }
  
        ul li a:hover {
            text-decoration: none;
            list-style-type: none;
            color: #FFF;
            padding-left: 20px;
            display: block;
            padding-top: 20px;
            padding-bottom: 20px;
            background-image: url(../img/nav-bg.png);
            background-repeat: no-repeat;
            background-position: left center;
            box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15);
        }
  
        .container ul li a:visited {
            text-decoration: none;
            list-style-type: none;
            color: #FFF;
            padding-left: 20px;
            display: block;
            padding-top: 20px;
            padding-bottom: 20px;
        }
  
        ul li ul {
            position: absolute;
            display: none;
            background: #5f6975;
            border-radius: 0px;
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
        }
  
        ul li:hover ul {
            display: inline-block;
            z-index: -1;
            left: 172px;
            top: 0px; 
        }
  
        ul ul li {
            background: #5f6975;
            float: none; 
            padding-left: 0px;
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a;
        }
  
        ul ul li a:link{
            padding: 10px 0px 10px 30px;
            color: #fff;
            width: 130px;
        } 
  
        ul ul li a:hover {
            background: #4b545f;
            box-shadow: none;
        }
  
        .current{
            text-decoration: none;
            list-style-type: none;
            color: #FFF;
            padding-left: 20px;
            display: block;
            padding-top: 20px;
            padding-bottom: 20px;
            background-image: url(../img/nav-bg.png);
            background-repeat: no-repeat;
            background-position: left center;
            box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15);
        }
  </code></pre>