title: CSS Dropdown Menu items go horizontally
body: <p>I searched on stackoverflow for this issue, but I couldn't find anything.</p>
  
  <p>I've been working on a dropdown menu in CSS. When you hover your mouse over the dropdown menu, the dropdown items are showing up horizontally instead of vertically. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="header"&gt;header
  &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;&lt;/a&gt;Biografie&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Foto's&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;Meer
          &lt;ul&gt;
              &lt;li&gt;&lt;a&gt;tutorials&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;inhuren&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>    /*header*/
  #header {
      background-color: #5c931f;
  }
  
  #header ul {
      list-style-type: none;
  }
  
  #header li {
      width: 100px;
      border: 1px solid black;
      display: inline;
      background-color: #000;
      color: #808080;
      position: relative;
      text-align: center;
  }
  
  #header li:hover {
      color: blue;
  }
  /*dropdown menu*/
  .dropdown ul{
      display: none;
  }
  .dropdown:hover ul{
      display: block;
      position: absolute;
  }
  </code></pre>
  
  <p>How do I get my dropdown list items vertically?</p>