Transparent background on spry menubar

i've been trying transparent background on spry menybar submenus little sucess.  using alpha filters creates problems ie , can't transparent gif work reason.

website here www.nathanielmcmahon.com

and css

 

@charset "utf-8";

/* sprymenubarhorizontal.css - revision: spry preview release 1.4 */

/* copyright (c) 2006. adobe systems incorporated. rights reserved. */

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

layout information: describes box model, positioning, z-order

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

/* outermost container of menu bar, auto width box no margin or padding */
ul.menubarhorizontal
{
    list-style-type: none;
    font-size: 100%;
    cursor: default;

}
/* set active menu bar class, setting z-index accomodate ie rendering bug: http://therealcrisp.xs4all.nl/meuk/ie-zindexbug.html */
ul.menubaractive
{
    z-index: 1000;
}
/* menu item containers, position children relative container , fixed width */
ul.menubarhorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    position: relative;
    background-image: url(../assets/images/transbgd.gif);
}
/* submenus should appear below parent (top: 0) higher z-index, off left side of screen (-1000em) */
ul.menubarhorizontal ul
{
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    position: absolute;
    z-index: 1020;
}
/* submenu showing class designation menubarsubmenuvisible, set left auto comes onto screen below parent menu item */
ul.menubarhorizontal ul.menubarsubmenuvisible
{
    left: 115px;
}
/* menu item containers same fixed width parent */
ul.menubarhorizontal ul li
{
    width: 13em;

}
/* submenus should appear overlapping right (95%) , (-5%) */
ul.menubarhorizontal ul ul
{
    position: absolute;
    margin: -27% 0 0 75%;
}
/* submenu showing class designation menubarsubmenuvisible, set left 0 comes onto screen */
ul.menubarhorizontal ul.menubarsubmenuvisible ul.menubarsubmenuvisible
{
    left: auto;
    top: 0;
}
/* menu items light gray block padding , no text decoration */
ul.menubarhorizontal a
{
    display: block;
    cursor: pointer;
    padding: 0.5em;
    color: #999999;
    text-decoration: none;
    font-family: arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
  background-image: url(../assets/images/transbgd.gif);
}
/* menu items have mouse on or focus have blue background , white text */
ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus
{
    color: #999999;
}

/* menu items open submenus set menubaritemhover blue background , white text */
ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible
{
    color: #999999;
}

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

submenu indication: styles if there submenu under given menu item

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

/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenu
{
    background-image: url(../spryassets/sprymenubardown.gif);
    background-repeat: no-repeat;
    background-position: 94% 50%;
}
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenu
{
    background-image: url(../spryassets/sprymenubarright.gif);
    background-repeat: no-repeat;
    background-position: 94% 50%;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenuhover
{
    background-image: url(../spryassets/sprymenubardownhover.gif);
    background-repeat: no-repeat;
    background-position: 94% 50%;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenuhover
{
    background-image: url(../spryassets/sprymenubarrighthover.gif);
    background-repeat: no-repeat;
    background-position: 94% 50%;
}

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

browser hacks: hacks below should not changed unless expert

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

/* hack ie: make sure sub menus show above form controls, underlay each submenu iframe */
ul.menubarhorizontal iframe
{
    z-index: 1010;
    position: absolute;
    filter:alpha(opacity:0.1);
}
/* hack ie: stabilize appearance of menu items; slash in float keep ie 5.0 parsing */
@media screen, projection
{
    ul.menubarhorizontal li.menubaritemie
    {
        display: inline;
        f\loat: left;
        background: transparent;
    }
}

More discussions in Dreamweaver support forum

adobe