Tenho Este Css, Duvidas Em Menu

[Guilherme014]

Quando abre os submenus, eles estao aparecendo em cinza, como fazer para ficar branco ?

ele tambem não funciona direito nos IE 6 e 7.

O link é este http://www.netsoft.eti.br/menu/menus.php.

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: 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: 8.2em;
       position: absolute;
       left: -1000em;
   }
   ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
       left: auto;
   }
   ul.MenuBarHorizontal ul li{
       width: 8.2em;
   }
   ul.MenuBarHorizontal ul ul{
       position: absolute;
       margin: -5% 0 0 95%;
   }
   ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
       left: auto;
       top: 0;
   }
   ul.MenuBarHorizontal ul{
       border: 1px solid #CCC;
   }
   ul.MenuBarHorizontal a{
       display: block;
       cursor: pointer;
       background-color: #CCCCCC;
       color: #666666;
       text-decoration: none;
       font-family:Verdana;
       font-size: 10px;
   }
   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-repeat: no-repeat;
       background-position: 666% 50%;
   }
   ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
       background-image: url(seta.gif);
       background-repeat: no-repeat;
       background-position: 0% 50%;
   }
   ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
       background-repeat: no-repeat;
       background-position: 666% 50%;
   }
   ul.MenuBarHorizontal iframe{
       position: absolute;
       z-index: 1010;
   }
   .Azul{
       background-color: #CCCCCC;
       color: #0077c1;
       text-decoration: none;
       font-family:Verdana;
       font-size: 10px;
       font-weight:bold;
   }
   ul.MenuBarHorizontal a.Azul{
       background-image: url(SpryMenuBarDownHover.gif);
       background-repeat: no-repeat;
       background-position: 666% 50%;
   }
   @media screen, projection{
       ul.MenuBarHorizontal li.MenuBarItemIE{
           display: inline;
           f\loat: left;
           background: #FFF;
       }
   }

javascript

var Spry;
   if(!Spry)
   {
       Spry = {};
   }
   if(!Spry.Widget)
   {
       Spry.Widget = {};
   }
   Spry.Widget.MenuBar = function(element, opts)
   {
       this.init(element, opts);
   };
   Spry.Widget.MenuBar.prototype.init = function(element, opts)
   {
       this.element = this.getElement(element);
       this.currMenu = null;
       var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
       if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
       {
           return;
       }
       if(opts)
       {
           for(var k in opts)
           {
               var rollover = new Image;
               rollover.src = opts[k];
           }
       }
       if(this.element)
       {
           this.currMenu = this.element;
           var items = this.element.getElementsByTagName('li');
           for(var i=0; i<items.length; i++)
           {
               this.initialize(items[i], element, isie);
               if(isie)
               {
                   this.addClassName(items[i], "MenuBarItemIE");
                   items[i].style.position = "static";
               }
           }
           if(isie)
           {
               if(this.hasClassName(this.element, "MenuBarVertical"))
               {
                   this.element.style.position = "relative";
               }
               var linkitems = this.element.getElementsByTagName('a');
               for(var i=0; i<linkitems.length; i++)
               {
                   linkitems[i].style.position = "relative";
               }
           }
       }
   };
   Spry.Widget.MenuBar.prototype.getElement = function(ele)
   {
       if (ele && typeof ele == "string")
           return document.getElementById(ele);
       return ele;
   };
   Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
   {
       if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
       {
           return false;
       }
       return true;
   };
   Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
   {
       if (!ele || !className || this.hasClassName(ele, className))
           return;
       ele.className += (ele.className ? " " : "") + className;
   };
   Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
   {
       if (!ele || !className || !this.hasClassName(ele, className))
           return;
       ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
   };
   Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
   {
       try
       {
           if (element.addEventListener)
           {
               element.addEventListener(eventType, handler, capture);
           }
           else if (element.attachEvent)
           {
               element.attachEvent('on' + eventType, handler);
           }
       }
       catch (e) {}
   };
   Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
   {
       var layer = document.createElement('iframe');
       layer.tabIndex = '-1';
       layer.src = 'java script:false;';
       menu.parentNode.appendChild(layer);
       
       layer.style.left = menu.offsetLeft + 'px';
       layer.style.top = menu.offsetTop + 'px';
       layer.style.width = menu.offsetWidth + 'px';
       layer.style.height = menu.offsetHeight + 'px';
   };
   Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
   {
       var layers = menu.parentNode.getElementsByTagName('iframe');
       while(layers.length > 0)
       {
           layers[0].parentNode.removeChild(layers[0]);
       }
   };
   Spry.Widget.MenuBar.prototype.clearMenus = function(root)
   {
       var menus = root.getElementsByTagName('ul');
       for(var i=0; i<menus.length; i++)
       {
           this.hideSubmenu(menus[i]);
       }
       this.removeClassName(this.element, "MenuBarActive");
   };
   Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
   {
       return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
   };
   Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
   {
       if(this.currMenu)
       {
           this.clearMenus(this.currMenu);
           this.currMenu = null;
       }
       if(menu)
       {
           this.addClassName(menu, "MenuBarSubmenuVisible");
           if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
           {
               if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
               {
                   menu.style.top = menu.parentNode.offsetTop + 'px';
               }
           }
           if(typeof document.uniqueID != "undefined")
           {
               this.createIframeLayer(menu);
           }
       }
       this.addClassName(this.element, "MenuBarActive");
   };
   Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
   {
       if(menu)
       {
           this.removeClassName(menu, "MenuBarSubmenuVisible");
           if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
           {
               menu.style.top = '';
               menu.style.left = '';
           }
           this.removeIframeLayer(menu);
       }
   };
   Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
   {
       var opentime, closetime;
       var link = listitem.getElementsByTagName('a')[0];
       var submenus = listitem.getElementsByTagName('ul');
       var menu = (submenus.length > 0 ? submenus[0] : null);
   
       var hasSubMenu = false;
       if(menu)
       {
           this.addClassName(link, "MenuBarItemSubmenu");
           hasSubMenu = true;
       }
   
       if(!isie)
       {
           listitem.contains = function(testNode)
           {
               if(testNode == null)
               {
                   return false;
               }
               if(testNode == this)
               {
                   return true;
               }
               else
               {
                   return this.contains(testNode.parentNode);
               }
           };
       }
       var self = this;
       this.addEventListener(listitem, 'mouseover', function(e)
       {
           if(self.bubbledTextEvent())
           {
               return;
           }
           clearTimeout(closetime);
           if(self.currMenu == listitem)
           {
               self.currMenu = null;
           }
           self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
           if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
           {
               opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
           }
       }, false);
       this.addEventListener(listitem, 'mouseout', function(e)
       {
           if(self.bubbledTextEvent())
           {
               return;
           }
           var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
           if(!listitem.contains(related))
           {
               clearTimeout(opentime);
               self.currMenu = listitem;
               self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
               if(menu)
               {
                   closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
               }
           }
       }, false);
   };

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 class="menu"><a href="#">Inicial</a></li>
     <li><a href="#">O Projeto</a>
       <ul>
           <li><a class="MenuBarItemSubmenu" href="#">&nbsp;&nbsp;Item 1.1</a></li>
           <li><a class="MenuBarItemSubmenu" href="#">&nbsp;&nbsp;Item 1.2</a></li>
           <li><a class="MenuBarItemSubmenu" href="#">&nbsp;&nbsp;Item 1.3</a></li>
       </ul>
     </li>
     <li><a href="#">Acompanhe</a>
         <ul>
           <li class="Azul"><a class="Azul">Etapa 1:</a></li>
           <li><a class="MenuBarItemSubmenu" href="#">&nbsp;&nbsp;1</a></li>
           <li><a class="MenuBarItemSubmenu" href="#">&nbsp;&nbsp;2</a></li>
           <li><a class="MenuBarItemSubmenu" href="#">&nbsp;&nbsp;3</a></li>
         <li class="Azul"><a class="Azul">Etapa 2:</a></li>
           <li><a class="MenuBarItemSubmenu" href="#">&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>