title: How do I align a dropdown menu below a <div>?
body: <p>When I hover over "<em>Dropdown ></em>", the dropdown menu appears at the left side below the top bar. How do I align it just below "<em>Dropdown ></em>"?</p>
  
  <p>Note that I am trying to do this with only CSS and HTML.</p>
  
  <p>My Code:</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>* {
    margin: 0;
    padding: 0;
  }
  header {
    position: fixed;
    height: 35px;
    width: 100%;
    background: black;
  }
  .top-container {
    margin-top: 7px;
  }
  /* Code for drop-down list */
  
  .dropdown {
    margin-left: 100px;
    display: inline;
    color: #FFF;
  }
  .dropdown_list {
    list-style: none;
    display: none;
    position: absolute;
    color: red;
  }
  .dropdown_list li {
    background: yellow;
  }
  .dropdown:hover {
    background: #333;
  }
  .dropdown:hover .dropdown_list,
  .dropdown_list:hover {
    display: block;
    top: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;div class="top-container"&gt;
        &lt;div class="dropdown"&gt;Dropdown &amp;#10097;
          &lt;ul class="dropdown_list"&gt;
            &lt;li&gt;item 1&lt;/li&gt;
            &lt;li&gt;item 2&lt;/li&gt;
            &lt;li&gt;item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>