Problem with css dropdown menu and z-index

[Preeminent]

Hey all,
I have a css nav with one link in that nav having a dropdown menu. The whole NAV div is positioned relatively. The dropdown box is appearing behind my #Main Div graphic which is also positioned relatively. I looked at other posts like this and thought that using negative z-index would work, but it isn’t.
Here is my question though. Should I be adding the z-index to the whole NAV div or is it possible to add a z-index to the dropdown menu that comes down when my link is clicked?
I am going to post a bit of code and maybe someone will have a suggestion.

Code:

• Home
• Portfolio
  
  Web
  Digital
  Print
• FAQ

Code:

#main {
position:relative;
background: url(“clipboardforcontent.png”);
height:720px;
width:960px;
overflow:hidden;
clear: both;
z-index:-1;
}

#nav{
padding-top:30px;
margin:0;
position: relative;
z-index:1;
}

#nav ul
{
list-style: none;
padding: 0;
margin: 0;
font-size:40px;
}

#nav li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 20px arial
}

#nav li a
{display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 80px;
background: #a98149;
color: #FFF;
text-align: center;
text-decoration: none;

}

#nav li a:hover
{background: #4e2c4a}

#nav div
{position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #a98149;
border: 1px solid #5970B2}

#nav div a
{position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 80px;
white-space: nowrap;
text-align: center;
text-decoration: none;
background: #4e2c4a;
color: #FFF;
font: 11px arial}

#nav div a:hover
{background: #a98149;
color: #FFF}

[Author]

Posts