title: CSS Dropdown menu under content container
body: <p>I tried making a dropdown menu only with css, now the problem is that my dropdown menu is hiding behing my content. I don't know why its not working, I tried using z-index but nothing worked. Here is a jsfiddle example and some code.<br>
  Please help me, thank you.</p>
  
  <p><a href="http://jsfiddle.net/42c6q/" rel="nofollow">http://jsfiddle.net/42c6q/</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="patterned"&gt;
          &lt;div class="container"&gt;
              &lt;ul id="main_menu"&gt;
                  &lt;li class="logo"&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/logo.png" alt="De Pannenkoekenbus Logo"/&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="red"&gt;
                      &lt;a href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="green"&gt;
                      &lt;a href="#"&gt;Evenementen&lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Item&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Item&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Item&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="blue"&gt;
                      &lt;a href="#"&gt;Bus&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li class="orange"&gt;
                      &lt;a href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div id="content"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.wrapper{
      min-height: 100%;
      height: auto !important;
      height: 100%;
      position: relative;
      background: url("images/kaart_bg.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      z-index: 0;
  }
  
  /* MENU */
  #main_menu{
      margin:0;
      padding:0;
      height: 130px;
      padding: 20px 0;
      overflow: hidden;
      z-index: 2;
  }
  #main_menu li{
      list-style: none;
      float: left;
      line-height: 50px;
      margin-left: 30px;
      width: 130px;
      text-align: center;
      margin-top: 40px;
      position: relative;
  }
  #main_menu li a, #footer_menu li a {
      color: #FFFFFF;
      text-shadow: 0px 1px 1px #000;
      display: block;
      font-family: 'PT Sans', sans-serif;
      text-decoration: none;
      font-size: 15pt;
  }
  #main_menu .logo{
      background: none;
      width: 224px;
      margin: 0;
  }
  #main_menu li a:hover, #footer_menu li a:hover{
      text-decoration: underline;
  }
  #main_menu li .submenu{
      display: none;
      margin: 0;
      padding: 0;
      z-index: 10;
      position: absolute;
      left: 0;
      top:100%;
  }
  #main_menu li .submenu:hover{
      display: block;
  }
  #main_menu li a:hover + .submenu{
      display: block;
  }
  #main_menu li .submenu li{
      margin: 0;
      padding: 0;
  }
  #main_menu li .submenu li a{
      font-size: 12pt;
  }
  /* COLORS */
  .red, .red .submenu{ background-color: #ed3327; }
  .blue, .blue .submenu{ background-color: #9dbdd5; }
  .green, .green .submenu{ background-color: #6fb145; }
  .orange, .orange .submenu{ background-color: #f5832e; }
  .yellow, .yellow .submenu{ background-color: #f6ec35; }
  
  /* CONTENT */
  #content{
      padding: 20px 0;
      overflow: hidden;
      margin:  0;
      padding: 20px;
  }
  </code></pre>