Spry Vertical Submenu Bar Appears Behind iFrame

Question

In IE and Chrome, the Spry vertical submenu bar appears properly on every page of the website, except for the one page that has iframes.
In IE, the submenus appear behind the iFrames
In Chrome, the submenus appear in front of the iFrames but with an incomplete border
In Firefox and Safari, the submenus appear as they should (in front of the iframes and with a complete border)
I've scoured this forum and tried several fixes that seemed to work for others with slightly different conditions but didn't work for mine.
I've included my SpryMenuBarVertical.css for referece; if you can offer a fix for this particular issue, I'd be forever grateful. Thank you!
—Lisa
@charset "UTF-8"; /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT: box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed-width box with no margin or padding */ ul.MenuBarVertical {      margin: 0;      padding: 0;      list-sty    le-type: none;      font-size: 100%;      cursor: default;      width: 245px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers are same fixed width as parent; position children relative to this container  */ ul.MenuBarVertical li {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      position: relative;      text-align: left;      cursor: pointer;      width: 245px; } /* Submenus are initially off the left side of the screen (-1000em) and then, on hover, appear slightly overlapping to the right and up with a higher z-index */ ul.MenuBarVertical ul {      margin: -5% 0 0 95%;      padding: 0;      list-style-type: none;      font-size: 100%;      position: absolute;      z-index: 1020;      cursor: default;      width: 12em;      left: -1000em;      top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible {      left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li {      width: 12em; } /******************************************************************************* DESIGN: color scheme, borders, fonts *******************************************************************************/ /* Outermost menu containers have no borders */ ul.MenuBarVertical {      border-bottom: 0px solid Gray; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul {      border: 1px solid Gray; } /* Menu items are a mustard yellow block with padding and no text decoration */ ul.MenuBarVertical a {      display: block;      cursor: pointer;      background-color: #E6DC8F;      padding: 0.5em 1em;      color: #333;      text-decoration: none;      border-top: 0px solid Gray; } /* Menu items that have hover or focus display with a dark green background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus {      background-color: #275936;      color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a dark green background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible {      background-color: #275936;      color: #FFF; } /* Active top-level menu items display a branch */ body#home a#homeNav, body#forsale a#forsaleNav, body#clubhouse a#clubhouseNav, body#falmouth a#aboutfalmouthNav, body#faqs a#faqNav, body#directions a#directionsNav, body#calendar a#calendarNav, body#partners a#partnersNav {      background-image: url(NavBranch.gif);      background-repeat: no-repeat;      color: #FFF;      padding-left: 50px; } /* Active top-level menu items with a submenu display a branch and a white arrow */ body#aboutridgewood a#aboutridgewoodNav, body#floorplans a#floorplansNav, body#contactrealtors a#contactNav, body#videos a#videosNav {      background-image: url(NavBranchArrowWhite.png);      background-repeat: no-repeat;      background-color: #275936;      color: #FFF;      padding-left: 50px; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and use a green background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenu {      background-image: url(NavArrowGreen.gif);      background-repeat: no-repeat; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and use a white background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenuHover {      background-image: url(NavArrowWhite.gif);      background-repeat: no-repeat; } /* Current menu items that have a submenu display a branch graphic to the left and a white arrow to the right */ body#story a#aboutridgewoodNav, body#story a#storyNav, body#neighborhood a#aboutridgewoodNav, body#neighborhood a#neighborhoodNav, body#structure a#aboutridgewoodNav, body#structure a#structureNav, body#green a#aboutridgewoodNav, body#green a#greenNav, body#maplewood a#floorplansNav, body#maplewood a#maplewoodNav, body#birchwood a#floorplansNav, body#birchwood a#birchwoodNav, body#sprucewood a#floorplansNav, body#sprucewood a#sprucewoodNav, body#aspenwood a#floorplansNav, body#aspenwood a#aspenwoodNav, body#cedarwood a#floorplansNav, body#cedarwood a#cedarwoodNav, body#oakwood a#floorplansNav, body#oakwood a#oakwoodNav, body#contactrealtors a#contactNav, body#contactrealtors a#contactrealtorsNav, body#lenders a#contactNav, body#lenders a#contactlendersNav, body#owners a#contactNav, body#owners a#contactownersNav, body#videoOverview a#videosNav, body#videoOverview a#videoOverviewNav, body#videoTour a#videosNav, body#videoTour a#videoTourNav, body#videoLender a#videosNav, body#videoLender a#videoLenderNav {      background-image: url(NavBranchArrowWhite.png);      background-repeat: no-repeat;      background-position: -1% 50%;      background-color: #275936;      color: #FFF;      padding-left: 50px; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarVertical iframe {      position: absolute;      z-index: 1010;      filter:alpha(opacity:0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection {      ul.MenuBarVertical li.MenuBarItemIE      {          display: inline;          f\loat: left;          background: #FFF;      } }

Answer 1

Long answer =  z-index
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Nancy O.