title: Nav bar sub menu displaying behind images
body: <p>i have a CSS menu with this CSS Code:</p>
  
  <pre><code>#cssmenu ul { margin: 0; padding: 0; text-align: center; }
  #cssmenu li { margin: 0; padding: 0;}
  #cssmenu a { margin: 0; padding: 0;}
  #cssmenu ul {list-style: none;}
  #cssmenu a {text-decoration: none;}
  #cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
  #cssmenu &gt; ul &gt; li {
      display: inline-block;
      margin-left: 15px;
      position: relative;
  }
  #cssmenu &gt; ul &gt; li &gt; a {
      color: #ffffff;
      font-size: 15px;
      line-height: 50px;
      padding: 16px 20px;
  -webkit-transition: color .15s;
     -moz-transition: color .15s;
       -o-transition: color .15s;
          transition: color .15s;
  }
  #cssmenu &gt; ul &gt; li &gt; a:hover {color: #ffffff; background-color:#666666; }
  #cssmenu &gt; ul &gt; li &gt; ul {
      opacity: 0;
      visibility: hidden;
      padding: 16px 0 20px 0;
      background-color: #eeeeee;
      text-align: left;
      position: absolute;
      top: 30px;
      left: 50%;
      margin-left: -90px;
      width: 180px;
  -webkit-transition: all .3s .1s;
     -moz-transition: all .3s .1s;
       -o-transition: all .3s .1s;
          transition: all .3s .1s;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  }
  #cssmenu &gt; ul &gt; li:hover &gt; ul {
      opacity: 1;
      top: 50px;
      visibility: visible;
  }
  #cssmenu &gt; ul &gt; li &gt; ul:before{
      content: '';
      display: block;
      border-color: transparent transparent rgb(250,250,250) transparent;
      border-style: solid;
      border-width: 10px;
      position: absolute;
      top: -20px;
      left: 50%;
      margin-left: -10px;
  }
  #cssmenu &gt; ul ul &gt; li { position: relative;}
  #cssmenu ul ul a{
      color: #000000;
      font-size: 13px;
      background-color: #eeeeee;
      padding: 5px 8px 7px 16px;
      display: block;
  -webkit-transition: background-color .1s;
     -moz-transition: background-color .1s;
       -o-transition: background-color .1s;
          transition: background-color .1s;
  }
  #cssmenu ul ul a:hover {background-color: #f36f25;}
  #cssmenu ul ul ul {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: -16px;
      left: 206px;
      padding: 16px 0 20px 0;
      background-color: #eeeeee;
      text-align: left;
      width: 160px;
  -webkit-transition: all .3s;
     -moz-transition: all .3s;
       -o-transition: all .3s;
          transition: all .3s;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  }
  #cssmenu ul ul &gt; li:hover &gt; ul { opacity: 1; left: 196px; visibility: visible;}
  #cssmenu ul ul a:hover{
      background-color: #f36f25;
      color: rgb(240,240,240);
  }
  </code></pre>
  
  <p>There is a slider underneath the nav code but the sub menus on the navigation are displaying behind the images on the slider, any ideas what i can do to get them to display in front of the slider images?</p>
  
  <p>JS Fiddle of the menu is here: <a href="http://jsfiddle.net/JLRte/" rel="nofollow">http://jsfiddle.net/JLRte/</a></p>