IE7 - dropdown navigation menu position problem!

Hi, I am in the early stages of creating a website located on a subdomain at http://www.kcssmusic.cbmultimedia.net It functions properly in all browsers except IE7 and previous releases. I think it is most likely a CSS related problem, but I am not sure. The problem is on rollover for the ul tags that have dropdown elements. In IE7 these elements appear about 70 pixels to the right of where they should be, but in all other browsers this does not happen.

This is the HTML code for the navigation bar.

<!-- Navigation Bar -->
    <div id="navigation">
      <div id="navbar">
        <ul id="dropDown" class="MenuBarHorizontal">
          <li class="home"><a href="#">HOME</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">COURSES</a>
            <ul>
              <li><a href="#">GRADE 9</a></li>
              <li><a href="#">GRADE 10</a></li>
              <li><a href="#">GRADE 11</a></li>
              <li><a href="#">GRADE 12</a></li>
            </ul>
          </li>
          <li><a href="#">ENSEMBLES</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">MULTIMEDIA</a>
            <ul>
              <li><a href="#">PHOTOS</a></li>
              <li><a href="#">VIDEO</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">HOMEWORK</a>
            <ul>
              <li><a href="#">GRADE 9</a></li>
              <li><a href="#">GRADE 10</a></li>
              <li><a href="#">GRADE 11</a></li>
              <li><a href="#">GRADE 12</a></li>
            </ul>
          </li>
          <li><a href="#">SUBMIT TEST</a></li>
        </ul>
      </div>
    </div>

And here are the CSS styles for the navigation bar.

 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
{
    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: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    float: left;
    width: 138px;
    padding: 0;
    margin: 0;
}
ul.MenuBarHorizontal li.home a {
    background-image: url(../images/.tab1_ro_2.jpg);
}

/* 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
{
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    left: -1000em;
    padding: 0;
    position: absolute;
    float: left;
    width: 138px;
    clear: both;
    margin: 0;
}
ul.MenuBarHorizontal li.home a:hover {
    background-image: url(../images/.tab1_ro_1.jpg);
}

/* 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;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    width: 138px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    padding: 0px;
    clear: both;
    margin: 0px;
}
/* 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
{
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    color: #2D6445;
    text-decoration: none;
    height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 20px;
    background-image: url(../images/ro_2.jpg);
    margin: 0px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
    color: #090;
    background-image: url(../images/ro_1.jpg);
    background-repeat: no-repeat;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
    color: #090;
    background-image: url(../images/ro_1.jpg);
    background-repeat: no-repeat;
}

And lastly, the code for the containing <div>

#wrapper #content-wrapper #navigation {
    padding-right: 10px;
    padding-left: 10px;
    width: 830px;
}
#wrapper #content-wrapper #navigation #navbar {
    width: 828px;
    float: left;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #CCC;
    border-bottom-color: #CCC;
    padding-top: 1px;
    padding-bottom: 1px;

I had a problem like this once before and I've been trying for a few hours to get it sorted out and I think the problem is in the CSS for the <ul> <li> tag. I tried a few things, but nothing solved it. I just want to get this bug sorted before I move on!! All help greatly appreciated!!