Spry horizontal menu's not displaying right in IE9

Question

Presently I'm using Dreamweaver CS4.  I have built a web site and placed a horizontal spry menu at the top of the web page.  It is situated on the page just below a smaller  non-spry horizontal menu.    In IE9, the menu appears above and to the right of this smaller menu rather than in the location I want it to appear.  What's more, in Dreamweaver the menu seems to float the upper right of the screen (I've attached a screen shot).   When I review the web site in IE 7, Firefox, Chrome, Opera, and Safari, the menu is correctly placed.
Can anyone help solve this issue?  When I view the web page in IE9 and put it into IE7 mode, all is well.  Not so in IE9 (or IE8 for that matter).
I'd appreciate direct email as well as answering it here to help others with my quandry.  My direct email address:   [email protected].
Thank you!
This image shows you where the menu appears in Dreamweaver AND in IE9
This image shows you where the menu correctly displays in IE 7 (standard mode), Chrome, Firefox, Opera, and Safari.
The smaller navigation you see "Subscribe to Alerts" etc is controlled by the following code:
#secondarynav {
  width: 475px;
  margin:  0px 0px 0px 0px;
  padding: 0px;
  float: right;
  /* height:20px; */
The entire page including these menus sits in a container (My Code):
#container {
  width: 930px;
  height:800px; /* changed from 775px */
  margin: 0 auto;
  border:1pt solid #c7a9a9;
  background-color: #FFFFFF; /* added by WDM, 6/5/2012 to keep container white while page body is gray */
Control for Menu Bar: (My code)
#menubar1 ul{
          z-index:5000;
          margin:40px 20px 0px 0px;
LAYOUT INFORMATION: describes box model, positioning, z-order (Dreamweaver Code)
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
/*  margin: 0; */
    margin:-45px 0px 0px 200px;
    padding: 0;
    list-style-type: none;
    font-size: 10pt; /* change from 100%, 12pt */
    cursor: default;
    width: auto;
    float:left;
          z-index: 5000;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
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;
    font-size: 9pt;  /* change from 100%, 12pt */
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 15em; /* change from 8em */
    float: left;
/* 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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 10pt;   /* change from 100%, 12pt */
    z-index: 1020;
    cursor: default;
    width: 13.0em;   /* change from 8.2em/14.2 */
    position: absolute;
    left: -1000em;
/* 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: 14.2em;   /* change from 8.2em/14.2 */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 170px; /* change from -5% 0 0 80%; */
/* 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;

Answer 1

I'm not sure where you attached files (I have not seen a way to do that in the Forum), But I will try to speak generally and work with what you have posted.
My suspicion is that the negative top margin you have applied is messing things up a bit.
I also note that it is usually better to apply margins to a CONTAINER of an unordered list (which is what menus are made of), than to apply the margins to the ul itself. So, restore the margin: 0; to the ul.MenuBarHorizontal style selector and create an enclosing element that bears the margin:-45px 0px 0px 200px; though I would still reconsider the use of negative top margin.
It is entirely possible that this simple change will help.
Please post the HTML for the top of the <body> section, including the menu code.
Beth