Tenho Este Codigo, De Menus, Mas não Funciona No Ie 7

[Guilherme014]

NO firefox, este menu mostra os sub-menus em cima da imagens, no ie 7, ele fica abaixo, o que pode ser ?

css

@charset "UTF-8";
ul.MenuBarHorizontal{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
}
ul.MenuBarActive{
    z-index: 1000;
}
ul.MenuBarHorizontal li{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: static;/*position: relative;*/
    text-align: left;
    cursor: pointer;
    width: 8em;
    float: left;
}
ul.MenuBarHorizontal ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 200px;
    position: relative;
    left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
    left: auto;
}
ul.MenuBarHorizontal ul li{
    width: 200px;
}
ul.MenuBarHorizontal ul ul{
    position: absolute;
    margin: -5% 0 0 95%;
    border: 1px solid #CCCCCC;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
    left: auto;
    top: 0;
    position: relative;
    border: 1px solid #CCCCCC;
}
ul.MenuBarHorizontal ul{
    border: 1px solid #CCCCCC;
}
ul.MenuBarHorizontal a{
    display: block;
    cursor: pointer;
    background-color: #CCCCCC;
    color: #666666;
    text-decoration: none;
    font-family:Verdana;
    font-size: 10px;
    height:auto;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
    background-color: #FFFFFF;
    color: #0077c1;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
    background-color: #FFFFFF;
    color: #0077c1;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu{
    background-position: 666% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
    background-position: 666% 50%;
}
ul.MenuBarHorizontal iframe{
    position: absolute;
    z-index: 1010;
}
ul.MenuBarHorizontal .AzulNegrito{
    background-color: #FFFFFF;
    color: #0077c1;
    text-decoration: none;
    font-family:Verdana;
    font-size: 11px;
    font-weight:bold;
    padding-top: 5px;
}
ul.MenuBarHorizontal .Cinza{
    background-color: #FFFFFF;
    color: ##0077c1;
    text-decoration: none;
    font-family:Verdana;
    font-size: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
ul.MenuBarHorizontal a.Cinza:hover, ul.MenuBarHorizontal a.Cinza:focus{
    background-image: url(seta.gif);
    background-repeat: no-repeat;
    background-position: 10% 50%;
    color: ##0077c1;
    padding-top: 5px;
    padding-bottom: 5px;
}
@media screen, projection{
    ul.MenuBarHorizontal li.MenuBarItemIE{
        display: inline;
        f\loat: left;
        background: #FFF;
    }
}
.inicial{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#inicial{
    width: 50px;
    text-align:center;
    padding-top: 3px;
}
.projeto{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#projeto{
    width: 80px;
    text-align:center;
    padding-top: 3px;
}
.acompanhe{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#acompanhe{
    width: 100px;
    text-align:center;
    padding-top: 3px;
}
.localize{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#localize{
    width: 135px;
    text-align:center;
    padding-top: 3px;
}
.novidade{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#novidade{
    width: 70px;
    text-align:center;
    padding-top: 3px;
}
.consulte{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#consulte{
    width: 60px;
    text-align:center;
    padding-top: 3px;
}
.historico{
    background-image: url(separa.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 15px;
}
#historico{
    width: 120px;
    text-align:center;
    padding-top: 3px;
}
#duvidas{
    width: 140px;
    text-align:center;
    padding-top: 3px;
}
ul.MenuBarHorizontal a:hover.semDropDrown{
    color:#FFFFFF;
    background-color:#CCCCCC;
    background-position: 666% 50%;
}

html

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li id="inicial" class="inicial"><a href="#" class="semDropDrown">Inicial</a></li>
  <li id="projeto" class="projeto"><a href="#">O Projeto</a>
    <ul class="Azul">
        <li class="Azul"><a class="Cinza" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</a></li>
        <li class="Azul"><a class="Cinza" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</a></li>
    </ul>
  </li>
  <li id="acompanhe" class="acompanhe"><a href="#">Acompanhe</a>
      <ul>
        <li class="AzulNegrito">&nbsp;</li>
        <li class="AzulNegrito">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Etapa 1:</li>
        <li><a class="Cinza" href="?acompanhe=1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3</a></li>
        <li><a class="Cinza" href="?acompanhe=2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4</a></li>
        <li class="AzulNegrito">&nbsp;</li>
        <li class="AzulNegrito">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Etapa 2:</li>
        <li><a class="Cinza" href="?acompanhe=11">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aguarde</a></li>
    </ul>
  </li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

[Guilherme014]

nunguem ajuda....

Editado Outubro 23, 2007 por Guilherme014

[web diackne]

o problema está no javascript SpryAssets/SpryMenuBar.js

ele deve estar a buscar as variaveis de forma compativel com o firefox e opera ...

coloca o js