我对编程非常缺乏经验。但我做了一个网站，作为工作的投资组合。我有单独的 PDF 文件加载到 iframe（放置在 ap div 中）中，您可以滚动浏览。该站点是 www.michaellautner.com 并且架构页面是出现问题的地方（如果您想查看设置）。顶部的菜单是出现问题的地方。现在我放弃了，因为它是我在dreamweaver 中制作的一个快速菜单，显然不再支持？我在一个可以插入的免费 CSS 菜单创建者网站上创建了一个新菜单栏。问题是标题为“学校”的菜单在 iframe 后面掉了下来，看不到。在 Firefox 中运行良好，但在 IE10 中无法运行。这是代码......在此工作了近 2 周，并且没有从菜单站点获得任何帮助。我也玩过 z-index，但没有成功，并尝试将 div 位置更改为相对位置，但它弄乱了整个页面。任何帮助都会很棒...
（我突出显示了菜单的 div 和 iframe 的 div）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Architecture</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS3 Dreamweaver CS3 target. Created Tue Jun 25 00:04:01 GMT-0400 (Eastern Daylight Time) 2013-->
<script language="JavaScript1.2" type="text/javascript">
</script>
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 17px;
}
body {
background-image: url(Images/Background_Image_Arch.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#apDiv1 {
position:absolute;
left:304px;
top:144px;
width:399px;
height:62px;
z-index:1;
font-family: "Comic Sans MS", cursive;
font-size: 16px;
}
#apDiv2 {
position:absolute;
left:261px;
top:195px;
width:960px;
height:500px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:261px;
top:201px;
width:960px;
height:500px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:649px;
top:86px;
width:181px;
height:28px;
z-index:3;
}
#apDiv5 {
position:absolute;
left:295px;
top:162px;
width:513px;
height:35px;
z-index:10;
}
#apDiv6 {
position:absolute;
left:489px;
top:162px;
width:447px;
height:40px;
z-index:5;
}
</style>
<link href="Scripts/menu_assets/styles.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('Master Pages/images_arch/architecture_r1_c3_f2.png','Master Pages/images_arch/architecture_r3_c8_f2.png','Master Pages/images_arch/architecture_r3_c9_f2.png','Master Pages/images_arch/architecture_r3_c10_f2.png','Master Pages/images_arch/architecture_r5_c2_f2.png','Master Pages/images_arch/architecture_r6_c2_f2.png');">
**<div id="apDiv3"><iframe src="file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Images/Architectural%20Images/3D%20Models%20and%20Renderings/index.html" style="border:0px;" name="archi_frame1" scrolling="auto" frameborder="no" align="center" height ="650px" width ="950px">
</iframe></div>**
<div id="apDiv4"><a href="mailto:mlautner03@yahoo.com" target="_blank">mike@michaellautner.com</a></div>
**<div id="apDiv5"><div id='cssmenu'>
<ul>
<li><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Images/Architectural%20Images/3D%20Models%20and%20Renderings/index.html' target="archi_frame1"><span>3D Models & Renderings</span></a></li>
<li><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Subpages/commercial/commercial.htm'><span>Commercial</span></a></li>
<li><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Subpages/residential/residential.htm'><span>Residential</span></a></li>
<li class='has-sub last'><a href='#'><span>School</span></a>
<ul>
<li><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Images/Architectural%20Images/School/Boathouse/index.html'target="archi_frame1"><span>Boathouse</span></a></li>
<li><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Images/Architectural%20Images/School/Chippewa%20Building/index.html'target="archi_frame1"><span>Chippewa Building</span></a></li>
<li><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Images/Architectural%20Images/School/Light%20Gallery/index.html'target="archi_frame1"><span>Light Gallery</span></a></li>
<li class='last'><a href='file:///C:/Users/Mike/Desktop/Graphic%20Design%20Projects/Website_mlautner/Images/Architectural%20Images/School/Museum/index.html' target="archi_frame1"><span>Museum</span></a></li>
</ul>
</li>
</ul>
</div> </div>**
<table border="0" cellpadding="0" cellspacing="0" width="1152">
<!-- fwtable fwsrc="Master Arch.png" fwpage="Page 1" fwbase="architecture.png" fwstyle="Dreamweaver" fwdocid = "1462477606" fwnested="0" -->
<tr>
<td><img src="Master Pages/images_arch/spacer.gif" width="20" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="8" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="84" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="69" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="31" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="47" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="20" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="98" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="127" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="206" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="442" height="1" border="0" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4" colspan="2"><img name="architecture_r1_c1" src="Master Pages/images_arch/architecture_r1_c1.png" width="28" height="236" border="0" id="architecture_r1_c1" alt="" /></td>
<td><a href="index.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('architecture_r1_c3','','Master Pages/images_arch/architecture_r1_c3_f2.png',1);"><img name="architecture_r1_c3" src="Master Pages/images_arch/architecture_r1_c3.png" width="84" height="49" border="0" id="architecture_r1_c3" alt="" /></a></td>
<td rowspan="2" colspan="8"><img name="architecture_r1_c4" src="Master Pages/images_arch/architecture_r1_c4.png" width="1040" height="120" border="0" id="architecture_r1_c4" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="49" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img name="architecture_r2_c3" src="Master Pages/images_arch/architecture_r2_c3.png" width="84" height="187" border="0" id="architecture_r2_c3" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="71" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="4"><img name="architecture_r3_c4" src="Master Pages/images_arch/architecture_r3_c4.png" width="167" height="116" border="0" id="architecture_r3_c4" alt="" /></td>
<td><a href="Master Pages/PDFs/Resume_Lautner, Michael.pdf" target="_blank" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('architecture_r3_c8','','Master Pages/images_arch/architecture_r3_c8_f2.png',1);"><img name="architecture_r3_c8" src="Master Pages/images_arch/architecture_r3_c8.png" width="98" height="44" border="0" id="architecture_r3_c8" alt="" /></a></td>
<td><a href="Master Pages/PDFs/References_Lautner, Michael.pdf" target="_blank" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('architecture_r3_c9','','Master Pages/images_arch/architecture_r3_c9_f2.png',1);"><img name="architecture_r3_c9" src="Master Pages/images_arch/architecture_r3_c9.png" width="127" height="44" border="0" id="architecture_r3_c9" alt="" /></a></td>
<td><a href="Master Pages/PDFs/Recommendation_Schneider.pdf" target="_blank" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('architecture_r3_c10','','Master Pages/images_arch/architecture_r3_c10_f2.png',1);"><img name="architecture_r3_c10" src="Master Pages/images_arch/architecture_r3_c10.png" width="206" height="44" border="0" id="architecture_r3_c10" alt="" /></a></td>
<td rowspan="2"><img name="architecture_r3_c11" src="Master Pages/images_arch/architecture_r3_c11.png" width="442" height="116" border="0" id="architecture_r3_c11" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="44" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><img name="architecture_r4_c8" src="Master Pages/images_arch/architecture_r4_c8.png" width="431" height="72" border="0" id="architecture_r4_c8" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="72" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img name="architecture_r5_c1" src="Master Pages/images_arch/architecture_r5_c1.png" width="20" height="448" border="0" id="architecture_r5_c1" alt="" /></td>
<td colspan="4"><a href="graphic.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('architecture_r5_c2','','Master Pages/images_arch/architecture_r5_c2_f2.png',1);"><img name="architecture_r5_c2" src="Master Pages/images_arch/architecture_r5_c2.png" width="192" height="63" border="0" id="architecture_r5_c2" alt="" /></a></td>
<td rowspan="3"><img name="architecture_r5_c6" src="Master Pages/images_arch/architecture_r5_c6.png" width="47" height="448" border="0" id="architecture_r5_c6" alt="" /></td>
<td rowspan="3" colspan="5" ><p style="margin:0px"> </p></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="63" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="photo.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('architecture_r6_c2','','Master Pages/images_arch/architecture_r6_c2_f2.png',1);"><img name="architecture_r6_c2" src="Master Pages/images_arch/architecture_r6_c2.png" width="161" height="64" border="0" id="architecture_r6_c2" alt="" /></a></td>
<td rowspan="2"><img name="architecture_r6_c5" src="Master Pages/images_arch/architecture_r6_c5.png" width="31" height="385" border="0" id="architecture_r6_c5" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="64" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><img name="architecture_r7_c2" src="Master Pages/images_arch/architecture_r7_c2.png" width="161" height="321" border="0" id="architecture_r7_c2" alt="" /></td>
<td><img src="Master Pages/images_arch/spacer.gif" width="1" height="321" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
z-index: 99;
}
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:transparent; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
#cssmenu{border-color:#000;}
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{background:#111;}