Question
Horizontal Spry Menus Appear Behind Embedded PDFs
When I create a vertical spry menu, I have no issue with the menus appearing behind embedded PDFS and other objects. We are working through a redesign and I now have to have a horizontal menu that has pull downs in them. When I do this I have a similar issue that someone had here:
http://forums.adobe.com/thread/146490
The problem isn't with flash though, it's PDF and other embedded objects. The menu appears behind them. Is there any solution to this? I've tried working with div tags, z-indexes, everything I can come up with....I'm banging my head trying to figure this out and that isn't helping 
. Thanks!!
Here's some sample code:
<script src="/code/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/code/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FF6300;
}
-->
</style>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">Grading/Guidelines</a>
<ul>
<li><a href="d_main3.cfm?site=d_sitemaker.cfm">Pro Scout Grading Sheet</a></li>
<li><a href="lettergrades.pdf" target="_new">Letters, Arrows, Special Teams Grades</a></li>
<li><a href="specificskillsandcriticalfactors.pdf" target="_new">Specific Skills and Critical Factors</a></li>
<li><a href="offensesscf.pdf" target="_new">Specific Skills and Critical Factors (Offense)</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/code/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/code/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<br /><br /><br />
<div style="z-index: -1;">
<embed src="lettergrades.pdf" width="500" height="500" autostart="false" style="z-index:-1;"></embed>
</div>
AdChoices