- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用来自 slideful.com 的 iframe 的幻灯片。 slideful 的幻灯片使用 jquery。将幻灯片放在主页上后,我在导航中添加了一个下拉菜单,它位于“slideful.com”幻灯片/iframe 的正上方。当我将鼠标悬停在菜单上时,子菜单隐藏在 slideful.com slideshow/iframe 后面。我试过添加“z-index”属性,以及“position:absolute;”但没有任何效果。
slideful.com 幻灯片/iframe 代码如下所示:
<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">
下拉菜单的代码显示如下:
<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>
最佳答案
忽略这个:
您的 iframe z-index 是第一个问题(不确定为什么数字低于 #nav)。另一个问题是您的 jquery 代码 - 菜单不起作用,我在 Firefox 23.0.1 js 控制台中收到此错误
reference error $ is not defined
http://jsfiddle.net/jnelson/krWS4/5/ - 这是您的幻灯片,具有相同的 css,但更改了 javascript 代码(仍然是 JQ),并且从您的 iframe 中删除了 z-index。
**编辑:**还有kimberlyfrommars请注意这些代码提示。
分离所有代码(无style="[stuff ...]")和<style>
一起在同一个文档中..让你更难编码。
<style>
)。无论何时创建 jquery 动画,请确保使用 .stop() .
编辑:
移除
主题.css(行:585)
.strip {
overflow: hidden; <-- this
background: none repeat scroll 0% 0% transparent;
}
和
主题.css(行:728)
#main_nav {
min-width: 900px;
overflow: hidden; <--- this
margin: 0px auto;
text-align: center;
padding-bottom: 30px;
}
让我知道它是否有效。
关于jquery - 悬停时下拉子菜单隐藏在 iframe 后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18423784/
我是一名优秀的程序员,十分优秀!