Level 2 submenu in horizontal spry menu not displaying in IE8

Hi,
I am having a problem with a level 2 submenu in a horizontal spry dropdown menu in IE8. It is displaying properly in FF and Safari.

The level 2 submenu menu is only visible where it is overlapping the level 1 submenu.
I have set the level 2 submenu’s left margin to 125px to clearly show how the overlapping portion of the menu is visible.
Ultimately, I will need to change the setting so that the 2nd level menu is not overlapping the first submenu.

Does anyone have any information or ideas as to why this would happen?
I am working with a Horizontal Spry Menu that I inherited. I have searched & tested and am completely stumped about this issue.
I would really appreciate any help anyone can offer.

I have checked the z-index settings.
I specifically set the level 1 submenu to overflow: visible even though from what I have read the default setting is visible.
I did notice that I can make FF duplicate the IE issue by setting the overflow to “hidden” - I’m not sure if that is a clue about what is going on in IE.

The Spry Menu is styled using the SpryMenuBarHorizontal.css and also additional CSS found in the styles.css
I will include the CSS code below.

I can’t post a link to the test site because I have not posted enough yet.
emrysdesign dot com/mala

Thanks again for any help you can offer.

CSS CODE:

SpryMenuBarHorizontal.css


@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.5 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule. 
Change the width property to a desired width (or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule). 
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule. 
Change the width property to a desired width (or change the property to auto to remove a fixed width). 
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule: 
Add the following properties to the rule: float: none; and background-color: transparent;. 
Delete the width: 8.2em; property and value. 



 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;

}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [edited url out for forum rule] */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li ul li
{
    margin: 0px;
    padding: 0px 5px 5px 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    background: url(/images/spry-bullet.png) 0px 8px no-repeat;
    padding: 0px 0px 0px 8px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
    top: 0;
    margin: 10px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
/*    width: 8.2em;*/
    width: 225px;
    position: absolute;
    left: -1000em;
    overflow: visible;
}



/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
    margin-top:-23px;
    margin-left:5px;
    padding:15px;
    padding-top:10px;
    left: auto;
    background-color:#000000;
    color:#FFFFFF;
    opacity:.88;
    filter: alpha(opacity=88);
    -moz-opacity: 0.88; 
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    font-size: 8px;
    
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible li img 
{
    padding-bottom:8px;
    background-color: #560c70;
    opacity:100;
    filter: alpha(opacity=100);
    -moz-opacity: 100;
    }

/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    /*width: 8.2em;*/
    width: 225px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
    position: absolute;
    margin: 0;
} 

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
    left: auto;
    top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
    border: 1px solid #333333;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    /*    background-color: #EEE;*/
    color:#FFFFFF;
    text-decoration: none;
    /*    font-family: arial;*/
    font-size:11px;
    line-height:20px;

}
/* Menu items that have mouse over or focus have a black background and red text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
/*    background-color: #33C;*/
    color: #FF0000;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a black background and red text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
/*    background-color: #33C;*/
    color: #FF0000;
}


/*******************************************************************************

 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 are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
/*    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
*/}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
/*    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;*/
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
/*    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;*/
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
/*    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;*/
}

/*******************************************************************************

 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.MenuBarHorizontal iframe
{
    position: absolute;
    top 150px;
    z-index: 1010;
    opacity:.0;filter: alpha(opacity=0);

}
/* 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.MenuBarHorizontal li.MenuBarItemIE
    {

        display: inline;
        f\\loat: left;
/*        background: #fff;*/
    }
}




styles.css Code

/* BEGIN Navigation */
#navigation {
    position: relative;
    height: 36px;
    background: url(images/nav-background.png) top left repeat-x;
    margin: 0px 0px 5px 0px;
}
#navigation ul.MenuBarHorizontal ul {  /* Fix spacing issues with SPRY */
    margin-top: 36px;
    clear: left;
    top: 0px;
    position:absolute;
}
/*Fix spacing issues with SPRY submenu */
 #navigation ul.MenuBarHorizontal ul ul { 
    margin-top: 5px;
    margin-left: 125px; 
    z-index: 9000;    } 

    
#navigation ul.MenuBarHorizontal li {
    position: relative;
    float: left;
}
/* #MenuBar1 is from adding SPRY */
#navigation ul#MenuBar1 { 
    margin: 0px;
    padding: 0px;
    height: 36px;
    }


#navigation ul li a.top-level {
    display: inline-block;
    float: left;
    margin: 0px 0px 0px 0px;
    height: 36px;
    background-position: 0px 0px;
}
#navigation ul li span.navigation-bullet {
    background: url(images/navigation-bullet.png) center top no-repeat;
    width: 8px;
    margin-left: 0px;
}


#navigation ul li a.top-level:hover {
    background-position: 0px 36px;
}
#navigation ul li#navigation-home a.top-level {
    background-image: url(images/navigation-home.png);
    width: 86px;
}
#navigation ul li#navigation-about-us a.top-level {
    background-image: url(images/navigation-about-us.png);
    width: 106px;
}
#navigation ul li#navigation-approach a.top-level {
    background-image: url(images/navigation-our-approach.png);
    width: 144px;
}
#navigation ul li#navigation-services a.top-level {
    background-image: url(images/navigation-services.png);
    width: 166px;
}
#navigation ul li#navigation-smallbusiness a.top-level {
    background-image: url(images/navigation-small-business.png);
    width: 223px;
}
#navigation ul li#navigation-publications a.top-level {
    background-image: url(images/navigation-publications.png);
    width: 118px;
}
#navigation ul li#navigation-contact a.top-level {
    background-image: url(images/navigation-contact.png);
    width: 127px;
}
#navigation ul li a span {
    visibility: hidden;
}


/* END Navigation */


Hi,

The problem is that you have applied the filter property to the parent ul and that has the effect of clipping all the content within inside.

You would need to remove the opacity filter from the parent ul and apply it to the list element itself instead.
e.g.


ul.MenuBarHorizontal ul.MenuBarSubmenuVisible li{
    filter:Alpha(Opacity=60);    background-color:#000000;
}


But of course that leaves you width gaps around the list element and you would need to re-code the styles to match the original design but using the list element for the padding etc.

Perhaps the easiest solution is to remove the opacity from the ul for IE and let it have a solid background.

Thank you so much for taking the time to look at the code & helping me!
I removed the opacity for IE and that fixed the problem :slight_smile: