title: Menu button dropdown text behind other menu buttons.
body: <p>When creating some <a href="http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_click" rel="nofollow noreferrer">clickable dropdowns</a>, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example</p>
  
  <p><a href="https://i.stack.imgur.com/UbZJB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UbZJB.png" alt="W3.CSS Clickable Dropdown"></a></p>
  
  <p>How can I fix this? Here is the code used to create the dropdown.  </p>
  
  <pre><code>&lt;div class="w3-container"&gt;
    &lt;div class="w3-dropdown-click"&gt;
      &lt;button onclick="myFunction()" class="w3-btn"&gt;Click Me!&lt;/button&gt;
      &lt;div id="Demo" class="w3-dropdown-content w3-border"&gt;
        &lt;a href="#"&gt;Link 1&lt;/a&gt;
        &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also made a fiddle, but it doesn't seem to be working: <a href="https://jsfiddle.net/n2fole00/99d8d7pj/" rel="nofollow noreferrer">https://jsfiddle.net/n2fole00/99d8d7pj/</a></p>
  
  <p>BTW, would this be considered a bug? </p>
  
  <p>Thanks. </p>