title: z-index not working for image behind wordpress menu
body: <p>I am trying to put an image behind my header and menu. I set all of the layers above the background image div including all of the menu elements to <code>position:relative;z-index:10;</code> and the div with the background image to <code>position:relative;z-index:0;</code></p>
  
  <p>you can see my code here: <a href="http://wheresuccessblooms.com/wordpress/" rel="nofollow">http://wheresuccessblooms.com/wordpress/</a></p>
  
  <p>I know it has something to do with the menu because when I delete the call to the menu the background image goes to where it should. Not sure what else I need to set the position and z-index to? PULLING MY HAIR OUT. lol Please help.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu-main-menu-container"&gt;
    &lt;ul id="menu-main-menu" class="menu"&gt;
      &lt;li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"&gt;
        &lt;a href="http://wheresuccessblooms.com/wordpress/contact-us/"&gt;HOME&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"&gt;
          &lt;a href="http://wheresuccessblooms.com/wordpress/contact-us/"&gt;ABOUT&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"&gt;
          &lt;a href="http://wheresuccessblooms.com/wordpress/contact-us/"&gt;Contact Us&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
                          &lt;div id="top_slider"&gt;
                              &lt;div id="slider"&gt;
                                  &lt;div id="slider_wrap"&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;  
                          &lt;/div&gt;
  </code></pre>
  
  <p>CSS: JUST THE MENU AND SLIDER CSS</p>
  
  <pre><code>nav{position:relative;z-index:5;}
  div.menu-main-menu-container{position:relative;z-index:5;}
  ul#menu-main-menu{position:relative;z-index:5;}
  li.menu-item{position:relative;z-index:5;}
  #page_nav {width:100%; height:53px;background-color:#f27479;position:relative;z-index:10;}
  #page_nav ul { float: left; display: block;position:relative;z-index:5;}
  #page_nav ul li { float: left; list-style-type: none; margin-top:20px;border-right:1px solid #ca6064;position:relative;z-index:5;}
  #page_nav ul li a { color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase; font-weight: 700; text-shadow: 0px 1px 0px rgba(0,0,0,.5); padding-left: 20px;position:relative;z-index:5; }
  #page_nav ul li a:hover { color: #a2a2a2; position:relative;z-index:5;}
  #page_nav ul li.current a, 
  #page_nav ul li.current a:hover { color: #ba4040; position:relative;z-index:5;}
  
  #top_slider{overflow:hidden;position:relative;z-index:0;left:0px;height:963px;top:-250px; margin:0px auto;
  background:url('http://wheresuccessblooms.com/wordpress/wp-content/themes/WhereSuccessBlooms/images/slide_1.jpg') no-repeat top center;}
  </code></pre>