title: Dropdown Menu hides behind div
body: <p>My drop down menu in mobile view hides behind my banner. I can't seem to fix it. I have added the z-index, and I've gone as high as 999 and still no difference.</p>
  
  <p>this is the <a href="http://quirktools.com/screenfly/#u=http%3A//convio.cancer.ca/site/TR/DaffodilDash/UFE_ON_even_%3Fpg%3Dentry%26fr_id%3D21959%23.VxeVqNQrJpg&amp;w=603&amp;h=966&amp;a=23&amp;s=1" rel="nofollow">test page</a></p>
  
  <p>Here is HTML:</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
       &lt;a class="dropdown-toggle provinces-btn" data-toggle="dropdown"&gt;Select Province&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt; 
       &lt;ul class="dropdown-menu"&gt;
           &lt;li&gt;&lt;a href="#"&gt;Alberta&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;British Columbia&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Manitoba&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;New Brunswick&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Newfoundland and Labrador&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Nova Scotia&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Nunavut&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Ontario&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Prince Edward Island&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Quebec&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Saskatchewan&lt;/a&gt;&lt;/li&gt;
  
       &lt;/ul&gt;  
     &lt;/li&gt;
  </code></pre>
  
  <p>Here is CSS:</p>
  
  <pre><code>.dropdown-menu {
      left: 40% !important;
      margin-left: -30px;
     z-index: 50;
  }
  
  
  @media screen and (max-width: 768px) {
  .provinces-btn {
  
      width: 100%;
      margin-top: 1px;
      border-radius: 12px;
      background-color: #3498db;
      border-color: rgba(0,0,0,0.3);
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      color: #FFF !important;
      display: inline-block;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 12px;
      padding: 10px 30px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      border: 1px solid rgba(0,0,0,0.3);
      border-bottom-width: 3px;
      text-decoration: none;
      z-index: 60;
  
  
  
  }
  
      .provinces-btn:hover, .provinces-btnActive {
          color: #FFEE00 !important;
          background: #1975D1;
          font-weight: 900;
      }
  
      .provinces-btn ul{
          margin: 0 auto;
      }
  
  }
  
  @media screen and (max-width: 604px) {
  .provinces-btn {
  
      width: 100%;
      margin-top: 1px;
      margin-left: 15px;
      border-radius: 12px;
      background-color: #3498db;
      border-color: rgba(0,0,0,0.3);
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      color: #FFF !important;
      display: inline-block;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 12px;
      padding: 10px 30px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      border: 1px solid rgba(0,0,0,0.3);
      border-bottom-width: 3px;
      text-decoration: none;
      z-index: 60;
  
     }
  
         .provinces-btn:hover, .provinces-btnActive {
          color: #FFEE00 !important;
          background: #1975D1;
          font-weight: 900;
      }
      .provinces-btn ul{
          margin: 0 auto;
      }
  
   }
  </code></pre>
  
  <p>Other CSS with z-index that I'm not sure if it is affecting it:</p>
  
  <pre><code>nav {
          padding: 0;
          position:relative;
          z-index:10;
          height: 0;
      }
  
      .showMenu {
          display: block;
          background: url() no-repeat center;
          background-size: 48px 48px;
          height: 80px;
          right: 0;
          top: 0;
          text-indent: -999999px;
          font-size: 0;
          position: absolute;
          z-index:11;
          border-left: 1px solid #DDDDDD;
  
      }
  </code></pre>