1

我有一个使用来自 slideful.com 的 iframe 的幻灯片。slideful 的幻灯片使用 jquery。将幻灯片放在首页后，我在导航中添加了一个下拉菜单，位于“slideful.com”幻灯片/iframe 的正上方。当我将鼠标悬停在菜单上时，子菜单隐藏在 slideful.com 幻灯片/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>
4

1 回答 1

2

忽略这个：

您的 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请注意您的代码的这些提示。

  1. 将所有代码（无样式=“[stuff ...]”）分开并<style>放在同一个文档中..使您的编码更加困难。

    • 最好将所有样式放入一个单独的文件中，以便于通用访问（所有页面都使用一种样式，而不是<style>在每个页面中）。

  2. 每当您创建 jquery 动画时，请确保使用.stop()。

    • 每次您将鼠标悬停在 SHOP 上时 .. 动画都会排队 .. 即使之前的动画尚未完成。所以 .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;
}

让我知道它是否有效。

于 2013-08-24T23:12:35.490 回答