Dropdown menu hidden behind javascript slider

Question

Currently, my part of the navigation drop-down menu is hiding behind the javascript slider that I have right below it. See Problem here . How can I display a dropdown menu above the slider?

Here are some of the CSS for the two divs that contain the corresponding navigation menu and slider.

Nav menu:

#nav {
width:1024px;
height:20px;
border-bottom:1px solid #ccc;
}

Slider:

#slider {
width:1024px;
height:300px;
background: #353A33;
padding-bottom:5px;
}

Any ideas?

Answer 1

Try adding z-indexto the class .dropdown:

 /* Navigation Style */
.dropdown {
  position:relative;
  font-family: arial, sans-serif;
  height:50px;
  width:100%;
  font-size:14px;
  color:#ffffff;
  background:#353A33;
  z-index:1000;
} 

Answer 2

usage position: absolute with the highest z-index on your navigator