title: CSS Menu Bar Hiding Behind Nivo Slider
body: <p>I have tried all the solutions that I can find on Google, but somehow, all information about the z-index don't really work :(. It's my first time using this site, so forgive me if my content seems messy.</p>
  
  <p><strong>Problem 1</strong>: <a href="https://www.dropbox.com/s/jr5wew27ydv7hcl/Screen%20Shot%202013-12-16%20at%2011.57.01%20pm.png" rel="nofollow">https://www.dropbox.com/s/jr5wew27ydv7hcl/Screen%20Shot%202013-12-16%20at%2011.57.01%20pm.png</a></p>
  
  <p><strong>Problem 2</strong>:<a href="https://www.dropbox.com/s/7ffztfq7iezc4ao/Screen%20Shot%202013-12-16%20at%2011.57.50%20pm.png" rel="nofollow">https://www.dropbox.com/s/7ffztfq7iezc4ao/Screen%20Shot%202013-12-16%20at%2011.57.50%20pm.png</a></p>
  
  <p><strong>My Own CSS Sheet</strong></p>
  
  <pre><code>    .header{
      width:960px;
      height:99px;
      font-family:'Francois One', sans-serif;
      text-transform:uppercase;
      z-index:9999px;}
      &lt;!--this holds the css menu bar--&gt;
  
      .banner, #slidermain {
      width:960px;
      height:328px;}
      &lt;!--this holds the nivo slider--&gt;
  
      .slidermain {
      background-color:#399;
      margin-bottom:10px;}
  </code></pre>
  
  <p><strong>Nivo Slider CSS Sheet</strong></p>
  
  <pre><code>/* The Nivo Slider styles */
  .nivoSlider {
      position:relative;
      width:100%;
      height:auto;
      overflow: hidden;
      float:left;
      z-index:10px;
  
  }
  
  .nivoSlider img {
      position: relative;
      top:0px;
      left:0px;
      max-width: none;
  }
  .nivo-main-image {
      display: block !important;
      position: relative !important; 
      width: 100% !important;
  }
  </code></pre>
  
  <p>If the css menu position is set to relative, it would work, but the dropdowns will push the nivo slider downwards to fit its size, causing other tables to shift downwards too. But once the mouse is away from the menu bar, the nivo slider resizes to its original position.</p>
  
  <pre><code>/* user menu settings */
  .ddmenu { 
    display: block;
    padding:5px;
    text-align:center;
    width: 110px;
    margin: 0 auto;
    margin-top:45px;
    position: relative;
    cursor: pointer;
    background: #fff;
    font-size: 1.2em;
    color: #656565;
    font-weight: normal;
    float: left;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -ms-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
  }
  .ddmenu:hover { color: #898989; }
  
  .ddmenu.open {
    background: #5a90e0;
    color: #fff;
    border-left-color: #6c6d70;
    position:relative;
    z-index:200px;
  }
  
  .ddmenu ul { 
    position: relative;
    top: 100%;
    left: -1px; /* move content -1px because of container left border */
    width: 200px;
    z-index:200px;
    padding: 10px;
    display: none;
    border-left: 4px solid #8e9196;
    background: #fff;
    list-style:none;
    text-decoration:none;
    text-align:left;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  }
  </code></pre>
  
  <p>Any help rendered would be greatly appreciated! Thank you!</p>