I've got a Spry horizontal menu bar. It works as it should in Safari and Firefox, but in IE6 (maybe 7 too) the submenus are not aligned properly. They are offset too far to the right. I've searched this forum and others and have found others who have experienced the same problem and have tried suggested solutions I've seen posted but I have not been able to solve the issue yet. Any help would be greatly appreciated.

On a side note, I've also got a problem in all browsers where the Home link shows up green but the other main Nav links show up purple. I want the four main links to appear purple when rolled over, and the submenu links to appear green when rolled over. However, since my Home link doesn't have a submenu, for some reason it appears green while the other links with submenus appear purple. So if you've got any insight on this issue that's welcome too!

Thanks,
Doug

Here is a link to a test page so you can see the file.

Here is my Spry Menu Bar Code:

@charset "UTF-8";

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

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

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

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

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

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
font-size: 9px;
cursor: default;
width: 493px;
top: 48px;
margin: 0;
left: 287px;
position: relative;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: IE z-index bug */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
display: inline;
font-size: 100%;
}
/* 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
{
margin: -78;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -2000em;
position: absolute;
}
/* 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
{
left: auto;
margin-top: -78px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* 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 no borders on all sides */
ul.MenuBarHorizontal ul
{
}
/* Menu items that have mouse over or focus have green text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #89b11a;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemHover,
{
color: #583399;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #583399;
}

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

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-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-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-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-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Menu items are a light gray text with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #666666;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
}
/*******************************************************************************

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;
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.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
}
}

Here is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Perna Design &amp; Advertising</title>
<link href="perna1col.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
#footer_content { zoom: 1;}
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header">
<h1><a href="index.html"><img alt="logo" name="logo" width="190" height="63" class="flt_lft_top_logo" id="logo" style="background-color: #583399" /></a></h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="MenuBarItemSubmenu">HOME</a></li>
<li><a href="about.html" class="MenuBarItemSubmenu">ABOUT</a>
<ul>
<li><a href="services.html">services</a></li>
<li><a href="bios.html">bios</a></li>
<li><a href="news.html">news</a></li>
</ul>
</li>
<li><a href="work.html" class="MenuBarItemSubmenu" >WORK</a>
<ul>
<li><a href="design.html">design</a> </li>
<li><a href="advertising.html">advertising</a></li>
<li><a href="casestudies.html">case studies</a></li>
</ul>
</li>
<li><a href="contact.html" class="MenuBarItemSubmenu">CONTACT</a>
<ul>
<li><a href="#">.</a></li>
<li><a href="location.html">location</a></li>
<li><a href="opportunities.html">opportunities</a></li>
</ul>
</li>
</ul>
<!-- end #header --></div>
<div id="mainContent"></div>
<!-- end #mainContent -->
<br clear="all" />
<div id="footer">
<div id="footer_content">
<p>&nbsp;</p>
</div>

<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>