title: "Drop-Up" Menu for my Code
body: <p>So I created a drop-down menu using only CSS and I've positioned them on my header and footer, my problem is how can I make my menu display above my button instead of under it(only for footer button). Any ideas?</p>
  
  <p>CSS</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>.d_button {
      color: #FFFFFF;
      background-color: #222222;
      border: none;
      cursor: pointer;
      font-size: 80%;
      font-weight: bolder;
      line-height: 50%;
      padding: 8px;
  }
  .drop_top {
      position: inherit;
      display: inline-block;
      background-color: #222222;
      float: right;
  }
  .drop_bot {
      position: inherit;
      display: inline-block;
      background-color: #222222;
      float: left;
  }
  .drop_content {
      display: none;
      position: absolute;
      right: 14px;
      background-color: #222222;
      min-width: 80px;
  }
  .drop_content a {
      color: #FFFFFF;
      padding: 5px;
      text-decoration: none;
      display: block;
  }
  .drop_content a:hover {
      color: #03A9F4;
  }
  .drop_top:hover .drop_content {
      display: block;
  }
  .drop_bot:hover .drop_content {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header_container"&gt;
    &lt;div id="header"&gt;
      Header Content
      &lt;div class="drop_top"&gt;
        &lt;button class="d_button"&gt;
          &lt;div id="nav_icon" class="top"&gt;&amp;#9776;&lt;/div&gt;
        &lt;/button&gt;
        &lt;div class="drop_content"&gt;
          &lt;a href="#"&gt;A&lt;/a&gt;
          &lt;a href="#"&gt;B&lt;/a&gt;
          &lt;a href="#"&gt;C&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
    &lt;div id="content"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="footer_container"&gt;
    &lt;div id="footer"&gt;
      Footer Content
      &lt;div class="drop_bot"&gt;
        &lt;button class="d_button"&gt;
          &lt;div id="nav_icon" class="bottom"&gt;&amp;#9776;&lt;/div&gt;
        &lt;/button&gt;
        &lt;div class="drop_content"&gt;
          &lt;a href="#"&gt;A&lt;/a&gt;
          &lt;a href="#"&gt;B&lt;/a&gt;
          &lt;a href="#"&gt;C&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>