Reputation:
I have my drop down menu directly above the slideshow. Because of this, the sub-menus get hidden behind the slideshow when I hover over the menu. I would like the sub-menus to appear over the slideshow.
Slideshow Code
var o=String.fromCharCode(60);var c=String.fromCharCode(62)
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm" frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;" allowtransparency="true"'+c+o+'/iframe'+c)
Dropdown Code
.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;
}
#nav a.selected { /* style for default selected value */
color:#4234ff;
}
#nav ul { /* submenu */
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;
}
#nav ul a { /* display block will make the link fill the whole area of LI */
display:block;
height:15px;
padding: 8px 5px;
color:#ff7777;
}
#nav ul a:hover {
text-decoration:underline;
padding-left:15px;
}
Dropdown jQuery
$(document).ready(function () {
$('#nav li').hover(function () {
$('ul', this).slideDown(350); //show its submenu
}, function () {
$('ul', this).slideUp(350); //hide its submenu
});
});
Dropdown HTML
<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>
</input
I would like my submenus that are shown when you hover over the "Shop" button to show up over the slideshow that is below it. They hide under it.
Upvotes: 1
Views: 8443
Reputation: 1
For showing dropdown menu over slide show
write the code in css where you have written dropdown menu code
.dropdown_menu { visibility: visible; z-index: 100; }
it will work
Upvotes: 0
Reputation: 1
I'm not sure how this would work if you're viewing your slideshow as in your code above (I'm not very familiar with Javascript or how this would work with iframes).
However, I came here also searching for answers, so I will post my solution in the case that it may help anyone who finds this page as I did.
I had the same issue, although my slideshow code looked like this.
<ul class="bjqs">
<li><img src="kjdsajkdhsja.png"></li>
</ul>
I found that changing the z-index to all the elements relating to the slideshow to lower than the drop down elements would not work - until I made my images background images in divs, as so:
<ul class="bjqs">
<li><div style="background-image:url(kjdsajkdhsja.png);width:200px;height:75px;"></div></li>
</ul>
Crummy workaround, but it did me fine for the project I was on.
Upvotes: 0
Reputation: 161
You will want to wrap your iframe and give that container a z-index value of 1 and the navigation container should have a z-index value of 2.
You will also need to set the position property value to relative for both of these containers.
#nav {position: relative; z-index: 2;}
#iframeContainerName {position: relative; z-index: 1;}
Also, you may want to look into other ways of implementing the slideshow. Using document.write has potential issues: Why is document.write considered a "bad practice"?
Upvotes: 0
Reputation: 474
#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;
}
#nav ul li {
width:100px;
float:left;
z-index:9999;
border-top:1px solid #fff;
}
Using z-index you can achieve this.
Upvotes: 1