title: Position of drop down menu using only CSS and HTML
body: <p>Is it possible to position drop down menu under specific button, and not first one by default using only css?</p>
  
  <p>For example, how to but drop down under forth button instead of first one (under INFO instead HOSTEL button)? I know that people usually use <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements when creating drop downs, but I am interested is it possible to choose a position when using <code>&lt;button&gt;</code> element.</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>.dropbtn {
      background-color: #000000;
      color: white;
      padding: 8px;
      font-size: 9px;
   width: 80px;
   margin-right: 5px;
   font-family: 'Istok Web', sans-serif;
      border: none;
      cursor: pointer;
  }
  
  .dropdown {
      position: relative;
      display: inline-block;
   float: left;
   top: 6.7%;
   margin-left: 5px;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #95e5c4;
   font-family: 'Istok Web', sans-serif;
   text-align: center !important;
      font-size: 9px;
      width: 80px;
      box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
      z-index: ;
  }
  
  .dropdown-content a {
      color: black;
      padding: 8px 12px;
      text-decoration: none;
      display: block;
  }
  
  .dropdown-content a:hover {background-color: #e6e6e6}
  
  .dropdown:hover .dropdown-content {
      display: block; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="dropdown"&gt;
     &lt;button class="dropbtn"&gt;HOSTEL&lt;/button&gt;
     &lt;button class="dropbtn"&gt;RESERVATION&lt;/button&gt;
     &lt;button class="dropbtn"&gt;GALLERY&lt;/button&gt;
     &lt;button class="dropbtn"&gt;INFO&lt;/button&gt;
     &lt;div class="dropdown-content"&gt;
    &lt;a href="#"&gt;EVENTS IN ZG&lt;/a&gt;
     &lt;/div&gt;
     &lt;button class="dropbtn"&gt;FIND US&lt;/button&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>