title: Drop-down menu that opens up/upward with pure css
body: <p>I've created a dropdown menu with pure CSS and I've gotten it to a place that I like except I want it to be "drop-up" not "drop-down" since the menu bar is going at the bottom of the layout. What I need to add or change to make it "drop-up"?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu * { 
    padding:0; 
    margin: 0; 
    font: 12px georgia; 
    list-style-type:none;
  }
  #menu { 
    margin-top: 100px;
    float: left;
    line-height: 10px; 
    left: 200px;
  }
  #menu a { 
    display: block; 
    text-decoration: none; 
    color: #3B5330;
  }
  #menu a:hover { background: #B0BD97;}
  #menu ul li ul li a:hover { 
    background: #ECF1E7; 
    padding-left:9px;
    border-left: solid 1px #000;
  }
  #menu ul li ul li {
    width: 140px; 
    border: none; 
    color: #B0BD97;  
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #B0BD97;
  }
  #menu ul li ul li a { 
    font: 11px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px;
  }
  #menu ul li {
    float: left; 
    width: 146px; 
    font-weight: bold; 
    border-top: solid 1px #283923; 
    border-bottom: solid 1px #283923; 
    background: #979E71;
  }
  #menu ul li a { 
    font-weight: bold;
    padding: 15px 10px;
  }
  #menu li {
    position:relative; 
    float:left;
  }
  #menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
    display:none;
    list-style-type:none;
    width: 140px;
  }
  #menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
    display:block;
  }
  #menu:hover ul li:hover ul li:hover ul {
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;
  }
  #menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;center&gt;&lt;a href="X"&gt;Home&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt; 
      &lt;li&gt;
        &lt;center&gt;&lt;a href="#"&gt;Practice Areas&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Civil Law&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Criminal Law &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;rsaquo;&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Joomla&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drupal&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Family Law &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;rsaquo;&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Joomla&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drupal&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Personal Injury &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;rsaquo;&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Joomla&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drupal&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Traffic Offenses &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;rsaquo;&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Joomla&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drupal&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;center&gt;&lt;a href="#"&gt;Attorney&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;center&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Locations &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;rsaquo;&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Rockville Office&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Frederick Office&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Greenbelt Office&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Phone Directory&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mailing Address&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/li&gt;
  
      &lt;li&gt;&lt;center&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Helpful Links&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Affiliates &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;rsaquo;&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Healthcare Providers&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Insurance Companies&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;&lt;/ul&gt;
      &lt;li&gt;&lt;center&gt;&lt;a href="#"&gt;News &amp;amp; Events&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Press Articles&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;li&gt;&lt;center&gt;&lt;a href="#"&gt;Espanol&lt;/a&gt;&lt;/center&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>