Put w3.css dropdown over image

Question

I'm developing this website for an animal shelter in my city, because the old website is displaying very bad on smaller devices like smartphones.

I made a color gradient with gimp for the part of the HTML.

#image {
  position: relative;
  width: 100%;
  /* for IE 6 */
}

#headline {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
}

#logo {
  position: absolute;
  top: 120px;
}

#menu-btn {
  position: absolute;
  top: 60px;
}

<header id="image">
  <img src="bar.png" width="100%" height="100px">
  <h3 class="w3-center" id="headline">Tierschutzverein</h3>
  <div class="w3-bar" id="menu-btn">
    <a class="w3-button w3-bar-item" href="#">Home</a>

    <div class="dropdown w3-bar-item">
      <span>Zuhause gesucht</span>
      <div class="dropdown-content">
        <p>Test</p>
      </div>
    </div>

    <a class="w3-button w3-bar-item" href="#">Über uns</a>
    <a class="w3-button w3-bar-item" href="#">Links</a>
    <a class="w3-button w3-bar-item" href="#">Kontakt</a>
    <a class="w3-button w3-bar-item" href="#">Pension</a>
  </div>
</header>

But now there is the problem, that the dropdown content isn't visible below the color gradient. I think it's because of the CSS at #menu-btn. How can I fix this mistake?