title: how to bring drop down menu infront of slider
body: <p>hi  i am having provlems with my  drop down menu  on my index page, the drop down items are hidden below my image slider which is directly below my nav bar, i would like to be able to see the drop down menu items, any help would be greatly appreciated 
  thank you very much;</p>
  
  <p><strong>here is my html for the nav bar:</strong></p>
  
  <pre><code>&lt;div class="nav"&gt;
        &lt;ul&gt;
          &lt;li class="home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
  
          &lt;li class=""&gt;&lt;a href="#"&gt;sports news&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;headlines&lt;/a&gt;&lt;/li&gt;
  
               &lt;li&gt;&lt;a href="#"&gt;when an where&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href=""&gt;rewind&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href=""&gt;manager of the week &lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="about"&gt;&lt;a class="active" href="#"&gt;music&lt;/a&gt;&lt;/li&gt;
          &lt;li class="news"&gt;&lt;a href="#"&gt;events&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;News #1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;News #2@@@&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;News #3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="contact"&gt;&lt;a href="#"&gt;events&lt;/a&gt;&lt;/li&gt;
          &lt;li class="contact"&gt;&lt;a href="#"&gt;gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li class="contact"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="cleaner"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>and here is my css:</strong></p>
  
  <pre><code>/*
  jmc
  */
  
  body {
      margin: 0px;
      padding: 0px;
      color: #4d4638;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 13px;
      line-height: 1.7em; 
      background: url(images/tooplate_body.jpg);
      background-color: #c2b8a1;
      background-repeat: repeat-x;
      background-position: top    
  }
  
  a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
  a:hover { text-decoration: underline; }
  
  .orange {
      color: #FC0;
  }
  
  .green {
      color: #CF6;
  }
  
  p { margin: 0 0 10px 0; padding: 0; }
  img { border: none; }
  em { color: #000; font-weight: bold; font-style: normal }
  
  h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
  h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
  h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
  h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
  h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
  h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
  h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
  
  .cleaner { clear: both }
  .h10 { height: 10px }
  .h20 { height: 20px }
  .h30 { height: 30px }
  .h40 { height: 40px }
  .h50 { height: 50px }
  .h60 { height: 60px }
  
  a.more { 
      clear: both; 
      display: block; 
      width: 87px; 
      height: 31px; 
      padding-right: 15px; 
      line-height: 30px; 
      text-align: center; 
      color: #000; 
      font-weight: bold; 
      background: url(images/tooplate_btn.png); 
  }
  
  a.more:hover { 
      text-decoration: none; 
      color: #960; 
  }
  
  .float_l { float: left }
  .float_r { float: right }
  
  .tooplate_margin { margin: 10px; }
  
  .image_wrapper { 
      display: inline-block; 
      border: 1px solid #cac2b1; 
      background: #b5ac98; 
      padding: 4px; 
      margin-bottom: 5px; 
  }
  
  .image_fl { 
      float: left; 
      margin: 3px 15px 0 0; 
  }
  
  .image_fr { 
      float: right; 
      margin: 3px 0 0 15px; 
  }
  
  .tooplate_list { 
      margin: 20px 0 20px 20px; 
      padding: 0; 
      list-style: none; 
  }
  
  .tooplate_list li { 
      color:#000; 
      margin: 0 0 5px 0; 
      padding: 0 0 0 25px; 
      background: url(images/tooplate_list.png) no-repeat scroll 0 5px;  
  }
  
  .tooplate_list li a { 
      color: #000; 
      font-weight: normal; 
  }
  
  .tooplate_list li a:hover { 
      text-decoration: underline; 
  }
  
  #tooplate_header {
      width: 960px;
      padding: 10px 0;
      margin: 0 auto;
  }
  
  #site_title { 
      float: left; 
  }
  
  #site_title h1 { 
      margin: 30px 0 0 0; 
      padding: 0; 
  }
  
  #site_title h1 a { 
      display: block; 
      width: 278px; 
      height: 50px; 
      color: #fff; 
      text-indent: -10000px; 
      background: url(images/tooplate_logo.png) no-repeat; 
  }
  
  /* menu */
  #tooplate_menu {
      float: right;
      width: 632px;
      height: 48px;
      margin-top: 40px;
      background: url(images/tooplate_menu.png)
  }
  
  #tooplate_menu ul {
      width: 600px;
      margin: 0 auto;
      padding: 0;
      list-style: none;
  }
  
  #tooplate_menu ul li {
      float: left;
      display: block;
      padding: 0;
      margin: 0;
      display: inline;
      text-align: center;
  }
  
  #tooplate_menu ul li a {
      display: block;
      width: 116px;
      padding: 9px 4px 9px 0;
      margin: 0;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
      color: #000000; 
      text-shadow: 1px 1px 1px #cec8ba;
      font-weight: normal;
      outline: none;
      border: none;
      background: url(images/tooplate_menu_divider.png) center right no-repeat
  }
  
  #tooplate_menu ul li a:hover, #tooplate_menu ul li .current { 
      color: #fff; 
      text-shadow: 1px 1px 1px #3d3728;  
  }
  
  #tooplate_menu ul .last { 
      background: none; 
  }
  
  #search_box { 
      float: right; 
      margin: 12px 0 0 0; 
      width: 170px; 
      height: 27px; 
      background: url(images/tooplate_search.png) no-repeat; 
  }
  
  #search_box form { 
      clear: both; 
      width: 170px; 
      height: 26px; 
      padding: 0; 
      margin: 0; 
  } 
  
  #searchfield { 
      float: left; 
      display: block; 
      height: 16px; 
      width: 130px; 
      padding: 5px; 
      font-size: 12px; 
      color: #ccc; 
      line-height: 0; 
      background: none; 
      border: none; 
  } 
  
  #searchbutton { 
      float: right; 
      display: block; 
      height: 26px; 
      width: 30px; 
      padding: 0; 
      margin: 0; 
      cursor: pointer;
      background: none; 
      border: none; 
  }
  
  /* end of menu */
  
  /* slider */
  
  #tooplate_middle { 
      clear: both;
      width: 940px;
      height: 307px;
      padding: 10px 40px;
      margin: 0 auto;
      background: url(images/tooplate_middle_home.png) no-repeat
  }
  
  #tooplate_middle_subpage { 
      clear: both;
      width: 820px;
      height: 207px;
      padding: 60px 100px;
      margin: 0 auto;
      font-family: Georgia, "Times New Roman", Times, serif;
      background: url(images/tooplate_middle_subpage.png) no-repeat;
  }
  
  #tooplate_middle_subpage h2 { 
      font-size: 48px; 
      color: #000; 
  }
  
  #tooplate_middle_subpage p { 
      font-size: 18px; 
      color: #000; 
      line-height: 30px; 
  }
  
  #tooplate_middle_subpage a { 
      color: #507921; 
      font-weight: normal; 
  }
  
  #slider {
      float: right;
      width: 940px;
      height: 300px; 
      overflow: hidden;
  }
  
  /* end of slider */
  
  #tooplate_main {
      clear: both;
      width: 960px;
      padding: 30px 0;
      margin: 0 auto;
  }
  
  .col_w960 { width: 960px; margin-bottom: 40px }
  .col_w600 { width: 600px }
  .col_w450 { width: 450px }
  .col_w300 { width: 300px }
  .col_allw300 { width: 300px; float: left; margin-right: 30px }
  .col_last { margin: 0 }
  .col_w960_last { margin: 0; background: none; }
  .col_last { margin: 0; }
  
  .wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
  .wwd_box img { float: left; width: 80px; margin-right: 30px }
  .wwd_box h3 { font-size: 16px; margin-bottom: 0 }
  .wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
  .wwd_box p { margin-bottom: 30px; }
  
  .lp_box { float: left; width: 300px; margin-right: 30px }
  .lp_box h6 { font-weight: bold; color: #507921 }
  .lp_box_last { margin: 0 }
  .lp_box img { border: 1px solid #CCC; padding: 4px }
  
  #cp_contact_form { 
      margin: 10px;
      padding: 0; 
      width: 412px; 
  }
  
  #cp_contact_form form { 
      margin: 0px; 
      padding: 0px; 
  }
  
  #cp_contact_form form .input_field { 
      width: 400px; 
      padding: 10px;
      border: 1px solid #ccc;  
      background: #fff;
      color: #333;  
      font-family: Verdana,Geneva,sans-serif;
      font-size: 12px;
      margin-top: 5px;
  }
  
  #cp_contact_form form label { 
      display: block; 
      width: 100px; 
      margin-right: 10px; 
      font-size: 14px; 
  }
  
  #cp_contact_form form textarea { 
      width: 400px; 
      height: 160px; 
      padding: 10px; 
      border: 1px solid #ccc;  
      background: #fff;
      color: #333;
      font-family: Verdana,Geneva,sans-serif;
      font-size: 12px;
      margin-top: 5px;
  }
  
  #cp_contact_form form .submit_btn { 
      margin: 5px 0px;
      padding: 5px 14px; 
      text-decoration: none; 
      border: 1px solid #ccc;  
      background: #fff;
      font-size: 14px;  
  }
  
  #map {
      margin: 10px;
  }
  
  #map img { 
      width: 300px; 
      height: 200px; 
      border: 1px solid #d9d3c5; 
      background: #b5ac98; 
      padding: 7px; 
      margin-bottom: 10px; 
  }
  
  .news_box { 
      clear: both; 
      margin-bottom: 30px; 
      padding-bottom: 30px; 
      border-bottom: 1px dashed #333; 
  }
  
  .news_box h2 { 
      font-size: 20px; 
      margin-bottom: 0; 
  }
  
  .news_box p.date { 
      color: #000; 
  }
  
  .news_box img { 
      float: left; 
      padding: 4px; 
      border: 1px solid #000; 
      margin-right: 30px; 
  }
  
  .news_box a.more { 
      clear:none; 
      float: right; 
  }
  
  .sb_lp_box { 
      clear: both; 
      margin-bottom: 20px; 
  }
  
  .sb_lp_box img { 
      border: 1px solid #cac2b1; 
      background: #b5ac98; 
      padding: 8px; 
      margin-bottom: 10px; 
  }
  
  .post_box { 
      clear: both; 
      margin-bottom: 30px; 
  }
  
  .post_box h2 { 
      font-size: 20px; 
      margin-bottom: 10px; 
  }
  
  .post_box p.post_meta { 
      margin-bottom: 0; 
  }
  
  .post_box p span.cat a { 
      color: #507921; 
      font-weight: 400; 
  }
  
  .post_box img { 
      width: 550px; 
      height: 160px; 
      border: 1px solid #cac2b1; 
      background: #b5ac98; 
      padding: 8px; 
      margin-bottom: 10px; 
  }
  
  .post_box a.more { 
      float: left; 
  }
  
  .lbe_box { 
      clear: both; 
      margin-bottom: 20px; 
  }
  
  .lbe_box h3 { 
      font-size: 16px; 
      margin-bottom: 0; 
  }
  
  .lbe_box h3 a { 
      color: #507921; 
      font-size: 16px; 
      font-weight: normal; 
  }
  
  .lbe_box h3 a span { 
      font-size: 12px; 
      color: #507921; 
  }
  
  .lbe_box p { 
      margin-bottom: 0; 
  }
  
  .lbe_box p.date { 
      font-size: 10px; 
      font-weight: 700; 
      color: #507921; 
  }
  
  #gallery { 
      margin: 0; 
      padding: 0; 
  }
  
  #gallery ul { 
      margin: 0; 
      padding: 0;
  }
  
  #gallery ul li { 
      display: block; 
      float: left; 
      width: 281px; 
      margin: 0 30px 30px 0; 
      padding: 8px; 
      border: 1px solid #d0c9b8; 
      background: #b6ac97; 
  }
  
  #gallery ul .third { 
      margin: 0 0 30px 0; 
  }
  
  #gallery ul li a img { 
      border: 1px solid #ccc; 
      margin-bottom: 5px; 
  }
  
  #tooplate_footer_wrapper {
      clear: both;
      width: 100%;
      background: #a19882;
      border-top: 10px solid #d0c8b4;
  }
  
  #tooplate_footer {
      width: 960px;
      margin: 0 auto;
      padding: 15px 0;
      text-align: center;
      color: #000;
      background:  url(images/tooplate_footer.jpg) top center no-repeat
  }
  
  #tooplate_cr a { 
      color: #5fa008; 
      font-weight: normal;
  
  
  }
  
  .nav ul {
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  
  .nav li {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    text-align: left;
  }
  
  .nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #888;
    transition: .3s background-color;
  }
  
  .nav a:hover {
    background-color: #005f5f;
  }
  
  .nav a.active {
    background-color: #aaa;
    color: #444;
    cursor: default;
  }
  
  /* Sub Menus */
  .nav li li {
    font-size: .8em;
  }
  
  /*******************************************
     Style menu for larger screens
  
     Using 650px (130px each * 5 items), but ems
     or other values could be used depending on other factors
  ********************************************/
  
  @media screen and (min-width: 650px) {
    .nav li {
      width: 130px;
      border-bottom: none;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
      display: inline-block;
      margin-right: -4px;
    }
  
    .nav a {
      border-bottom: none;
    }
  
    .nav &gt; ul &gt; li {
      text-align: center;
    }
  
    .nav &gt; ul &gt; li &gt; a {
      padding-left: 0;
    }
  
    /* Sub Menus */
    .nav li ul {
      position: absolute;
      display: none;
      width: inherit;
    }
  
    .nav li:hover ul {
      display: block;
    }
  
    .nav li ul li {
      display: block;
    }
      }
  
  
      #nav ul {
      z-index: 9999;
  }
  </code></pre>
  
  <p>thanks again;</p>