title: having problems creating a dropdown menu with css
body: <p>I'm trying to create a dropdown menu just for one li a element but the dropdown appears horizontally instead of vertically. It's based in another html code i wrote before and it worked but i don't know what's wrong with this one. I need just the last li to be a dropdown, and the hole code to be resposive.</p>
  <p>this is the html code:</p>
  <pre><code>&lt;header id=main_header&gt;
      &lt;nav&gt;&lt;ou id=&quot;header_items&quot;&gt;
        &lt;li id=&quot;first&quot;&gt;&lt;a&gt; LOGO &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;.&quot;&gt; HABITACIONES &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;.&quot;&gt; SPA &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;.&quot;&gt; CONFORT &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;.&quot;&gt; UBICACIÓN &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;.&quot;&gt; IDIOMA &lt;/a&gt;
          &lt;ul class=&quot;submenu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ou&gt;&lt;/li&gt;
      &lt;/ol&gt;&lt;/nav&gt;
  &lt;/header&gt;
  
  </code></pre>
  <p>and CSS:</p>
  <pre><code>body {
    background-color: #e8ebea;
    width: auto;
    height: 2000px;
  }
  
  /*header*/
  #main_header {
    width: auto;
    height: 60px;
    margin: 0;
  }
  
      nav ul #header_items {
          width: 100%;
          height: 100%;
          margin: 0;
      }
  
          #header_items {
            list-style-type: none;
          }
  
              #header_items li {
                display: inline-block;
                position: relative;
                width: 16%;
                height: 100%;
                margin-right: -4px;
              }
  
              #header_items li#first {
                width: 20%;
              }
  
                  #header_items li a {
                    display: block;
                    line-height: 60px;
                    text-align: center;
                    font-size: auto;
                    text-decoration: none;
                    color: #000;
                  }
  
                    #header_items li a:hover {
                      background-color: #dcdedd;
                    }
  
                    .submenu {
                              background-color: #e8ebea;
                              width: 100%;
                    height: auto;
                              display: block;
                    position: absolute;
                     }
  
  </code></pre>
  <p>Thanks!</p>