Drop down submenus getting hidden behind iframe on hover

Drop down submenus getting hidden behind iframe on hover

I have a slideshow that uses an iframe from slideful.com. The slideshow
from slideful uses jquery. After putting the slideshow on the homepage, I
then added in a drop down menu in the navigation, which is directly above
the "slideful.com" slideshow/iframe. When I hover over the menu, the
submenus get hidden behind the slideful.com slideshow/iframe. I've tried
adding the "z-index" attribute, as well as "position:absolute;" but
nothing is working.
The slideful.com slideshow/iframe code looks like this:
<iframe src="http://slideful.com/v20130725_0935361299097223_pf.htm"
frameborder="0" style="
border:0px;padding:0px;margin:0px;width:900px;height:563px;position:relative;z-index:1000;"
allowtransparency="true">
The code for the drop down menu appears as this:
<style type="text/css">
.tab{
font-family: arial, verdana, san-serif;
font-size: 14px;
}
.asd
{
text-decoration: none;
font-family: arial, verdana, san-serif;
font-size: 13px;
color:#4234ff;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:100px;
background:#1E5B91;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#ffffff;
text-align:center;
color:#ffeecc;
}
#nav li a:hover
{
color:#470020;
}
/* style for default selected value */ #nav a.selected {
color:#4234ff;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li
{
width:100px;
float:left;
border-top:1px solid #fff;
}
/* display block will make the link fill the whole area of LI */ #nav ul a
{
display:block;
height:15px;
padding: 8px 5px;
color:#ff7777
}
#nav ul a:hover
{
text-decoration:underline;
padding-left:15px;
}
</style>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(350);
},
function () {
//hide its submenu
$('ul', this).slideUp(350);
}
);
});
</script>
<input type=hidden name=arav value="1*#*#*2"><ul id='nav'>
<li> <a href='#'>SHOP</a>
<ul>
<li style='background-color:#b0c4de;'><a href=http://LINK.com>Womens</a></li>
<li style='background-color:#bebebe;'><a href=http://LINK.com>Mens</a></li>
</ul>
</li>
</ul>