Drop down menu items not visible - html

Question

I have made a navigation menu bar and also two dropdown menus with 3 items each. My problem is that, below this menu, I have a slider, so when I hover my dropdown, two of the three items are hidden behind the slider.
How can I solve this?
My HTML:
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>item #1
</li>
<li> item #2
</li>
<li> dropdown #1
<ul>
<li>dropdown #1 item #1
</li>
<li>dropdown #1 item #2
</li>
<li>dropdown #1 item #3
</li>
</ul>
</li>
<li> dropdown #2
<ul>
<li>dropdown #2 item #1
</li>
<li>dropdown #2 item #2
</li>
<li>dropdown #2 item #3
</li>
</ul>
</li>
<li> item #3
</li>
</ul>
</div>
</div>
My CSS:
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}

Answer 1

I think the problem is on your z-index properties.
You need to set on #nav and #slider elements position and z-index properties.
#nav {
position: relative;
z-index: 2;
}
#slider{
position: relative;
z-index: 1;
}
That means the #nav menu will be front slider when you set a z-index property large than z-index on #slider. Have you attention that z-index doesn't work if you not set element position property like relative or absolute.
You can look this link for example - http://css-tricks.com/almanac/properties/z/z-index/