Can't get the UL & LI elements aligned correctly in IE6/IE7

[zincoxide]

This site shows a page outline that I have been working on.

I had the menu fully functional with dropdowns (FF) but it wasn't looking right in IE. Then someone told me to do an image for the background and now I can't get the LI elements to stay within the UL box.

If you look at FF and then IE6/IE7, you will see what I mean.

I have changed the LI to yellow backgrounds to show what is happening but for some reason, IE is *pushing* the LI elements over to the right. Almost as if there was a left-margin.

Can anyone please help me figure out why this is happening?

Here is my CSS:

body {
   background: url(../images/pattern-grey.gif) repeat;
   font-size: 85%;
   font-family: "Myriad Pro", Verdana, "Bitstream Vera Sans";
   color: #484848;
   padding: 15px 0 0 0;
   margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
   margin: 0 0 1em 0;
   padding: 0;
}

h1, .contentheading { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3, .contentpagetitle-b******** { font-size: 1.2em; font-weight: bold; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.9em; }

a:link, a:active {
   color: #007468;
   text-decoration: underline;
}

a:visited, a:hover {
   color: #ff6f00;
   text-decoration: underline;
}
#container {
   width: 980px;
   background: transparent;
   margin: 0 auto;
}


/**********************************************************************/
/**********   mainbody   **********************************************/
/**********************************************************************/
#mainbody {
   position: relative;
   width: 780px;
   float: right;
}

#header {
   width: 100%;
   height: 150px;
}

#header img.logo {
   float: left;
   margin: 10px 0 0 0;
}

#header h1.tollfree {
   width: 350px;
   height: 118px;
   float: right;
   background: transparent url(../images/tollfree.png) right no-repeat;
   margin: 10px 0;
}

#header h1.tollfree span{
   display:none;
}

#sub-header {
   position: relative;
   clear: both;
   width: 100%;
   height: 235px;
   margin-bottom: 10px;
   background: white url(../images/house-chalet.jpg) left no-repeat;
   z-index: 10;
}

#sub-header div.shadow {
   position: absolute;
   left: -6px;
   width: 6px;
   height: 100%;
   background: transparent url(../images/shadow-left.png) left repeat-y;
} 

#sub-header div.logo {
   position: relative;
   height: 235px;
   width: 229px;
   float: right;
   background: #ff6f00 url(../images/bg-orange.gif) left repeat-x;
   border-left: thin solid white;
}

#sub-header div.logo img {
   position: absolute;
   left: 15px;
   top: 22px;
}

/*****************************************************************************/
/***************   CONTENT   *************************************************/
/*****************************************************************************/

#content {
   position: relative;
   width: 100%;
   background-color: white;
   z-index: 10;
}

#content div.shadow {
   position: absolute;
   left: -6px;
   width: 6px;
   height: 100%;
   background: transparent url(../images/shadow-left.png) left repeat-y;
   z-index: 20;
}   

#textarea {
   width: 521px;
   margin: 0px 15px;
   padding: 15px 0;
   float: left;
}

#content h1 {
}

#content h1 span, #content .contentheading span {
   color: #007468;
}

/*****************************************************************************/
/***************   SIDEBAR   *************************************************/
/*****************************************************************************/

#sidebar {
   width: 209px;
   float: right;
   padding: 15px 0;
   margin-right: 0px;
}

#sidebar h1, #sidebar h3 {
   background: transparent url(../images/bg-sidebar-heading.png) repeat-y left;
   padding-left: 10px;
   color: black;
}

#sidebar .moduletable-livechat {
   margin-bottom: 1.5em;
}

ul#magpierss {
   list-style: none inside none;
   margin: 0px auto;
   padding: 0px;
   width: 90%;
}

ul#magpierss li {
   margin: 5px 0 5px 0;
   border-bottom: 1px dotted #848484;
}

ul#magpierss li a:link, ul#magpierss li a:active {
   text-decoration: none;
   font-weight: bold;
}

ul#magpierss li a:hover, ul#magpierss li a:visited {
   text-decoration: underline;
}

/*****************************************************************************/
/***************   FOOTER    *************************************************/
/*****************************************************************************/
#footer {
   width: 100%;
   clear: both;
   color: white;
   margin: 10px 0 0 0;
}

#footer p {
   width: 450px;
   float: left;
   margin: 0 0 10px 0;
}

#footer p span {
   font-family: Verdana, Helvetica, sans-serif;
   font-size: .8em;
}

#bottom-bar {
   clear: both;
   background: #009C8C;
   width: 100%;
}

#bottom-bar ul {
   width: 765px;
   padding: 0;
   margin: 0 0 0 15px;
   list-style: none inside none;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: .9em;
}

#bottom-bar ul li {
   float: left;
   width: 18%;
}

#bottom-bar ul li a:link, #bottom-bar ul li a:visited, #bottom-bar ul li a:active {
   color: #eeeeee;
   text-decoration: none;
}

#bottom-bar ul li a:hover {
   text-decoration: underline;
}


/*****************************************************************************/
/***************   MENU-LEFT   ***********************************************/
/*****************************************************************************/
#mainmenu-container {
   position: absolute;
   width: 200px;
   top: 165px;
}

ul#mainlevel-mainmenu {
   position: relative;
   width: 100%;
   height: 235px;
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: inside;
   list-style-image: none;
background: blue;
}

ul#mainlevel-mainmenu li {
   margin: 0 0 .2em 0;
   padding: 0;
   background: transparent url(../images/mainmenu-tab.png) right no-repeat;
   width: 100%;
   height: 54px;
   background: yellow;
}

ul#mainlevel-mainmenu li img {
   display: none;
}

ul#mainlevel-mainmenu ul {
   display: none;
}
/*****************************************************************************/
/***************   CLASSES   *************************************************/
/*****************************************************************************/

.clr-both { clear: both; }

[healthnut101]

when you hover over the menu option the new options are suppose to come up underneath?

[zincoxide]

Sorry for the delay in responding... I'm suppose to get updated when a new post is made, but I wasn't

I think the hover should be working now, and I think the layout should be working. If people can take a look and let me know, I would appreciate it.

Thanks!