CSS horizontal drop down menu not showing correctly in IE

Hello,

I am trying to do a pure CSS menu and am having issues - especially with IE. The code I borrowed from displays correctly in IE but mine doesn't. I did add some CSS for the sub-level menus but I can't figure out what is causing the issue.

Here is the site that I used as an example which displays correctly in IE7:
http://www.cssplay.co.uk/menus/centered.html

Here is the html I am using:
<div id="menu_cont">
  <div id="menu">

    <ul id="nav">
      <li><a href="index.htm" class="top_parent">HOME</a></li>
      <li><a href="opportunities.htm" class="top_parent">OPPORTUNITIES</a>
          <ul>
            <li><a href="opportunities/current_promotions.htm">Current Promotions</a></li>
            <li><a href="opportunities/go_green.htm">Go Green With CPS</a></li>
            <li><a href="opportunities/news_events.htm">News/Events</a></li>

            <li><a href="opportunities/partner_rewards.htm">Partner and Rewards Programs</a></li>
            <li><a href="opportunities/training.htm">Training</a></li>
          </ul>
      </li>
      <li><a href="opportunities/credit.htm" class="top_parent">CREDIT</a></li>
      <li><a href="products/product_lines.htm" class="top_parent">PRODUCTS</a>
          <ul>

            <li><a href="products/cut_sheets.htm">Cut Sheets</a></li>
            <li><a href="products/product_lines.htm">Product Lines</a>
                <ul>
                  <li><a href="products/irrigation.htm">Irrigation</a></li>
                  <li><a href="products/landscape.htm">Landscape</a></li>
                  <li><a href="products/lighting.htm">Lighting</a></li>

                  <li><a href="products/pump.htm">Pump</a></li>
                  <li><a href="products/ponds_water_features.htm">Ponds and Water Features</a></li>
                </ul>
            </li>
            <li><a href="products/request_catalog.htm">Request a Catalog</a></li>
          </ul>
      </li>

      <li><a href="locations/branch_offices.htm" class="top_parent">LOCATIONS</a>
          <ul>
            <li><a href="locations/branch_offices.htm">Branch Offices</a></li>
            <li><a href="locations/territory_sales.htm">Territory Salespeople</a></li>
          </ul>
      </li>
      <li><a href="why_cps/inside_cps.htm" class="top_parent">WHY CPS</a>

          <ul>
            <li><a href="why_cps/cps_showcase.htm">CPS Showcase</a></li>
            <li><a href="why_cps/inside_cps.htm">Inside CPS</a></li>
            <li><a href="why_cps/employee_corner.htm">Employee Corner</a></li>
          </ul>
      </li>
      <li><a href="links.htm" class="top_parent">LINKS</a></li>

      <li><a href="employment/current_openings.htm" class="top_parent">EMPLOYMENT</a>
          <ul>
            <li><a href="employment/benefits.htm">Benefits</a></li>
            <li><a href="employment/current_openings.htm">Current Openings</a></li>
          </ul>
      </li>
      <li><a href="locations/policies.htm" class="top_parent">POLICIES</a></li>

    </ul>
  </div>
</div>

I've attached the css for the menu as a snippet. Also, here is the link to the full css:
http://cpsdistributors.com/test/cps_styles.css

Here is the ie only style sheet:
#menu {
  float:left;
  }
#menu a {
  float:left;
  display: inline;
  }
#menu li {
  float:left;
  }
.container {display:inline-block;}

Thank you!

#menu_cont {
	width:900px;
	height: 20px;
	padding-top:9px;
	margin:0 auto;
	background: url(images/menu_bkgnd.jpg) no-repeat center top;
}
/*begin menu*/
#menu{
	font: bold 11pt "Trebuchet MS", Tahoma, Arial, sans-serif;
	margin:0 auto;
	padding:0;
	list-style-type:none;
    white-space:nowrap;
	display:table;
}
#menu a{
	width:auto;
	color: #fff;
    display:block;
	text-decoration: none;
    white-space:nowrap;
	padding:0px 16px;
}
#menu li { /* all list items */
	display:table-cell;
	background: none;
    white-space:nowrap;
  }
.container {clear:both; text-decoration:none;}
#menu li li {
	width: 100%;
	display: block;
	}
#menu li li li{
	width: 100%;
	display: block;
	}
#menu li ul{
/*Make the sub list items invisible*/
	display: none;	
	left: -999em;
	position: absolute;
	}
#menu li:hover ul ul, #menu li.over ul ul{
/*Make the second-level list items invisible*/
	display: none;
	position: absolute;
	left: -999em;
}
#menu li:hover ul, #menu li.over ul{ 
/* lists nested under hovered list items */
	display: block;
	left: auto;
	font: bold 10pt "Trebuchet MS", Verdana, Arial, sans-serif;
	white-space: nowrap;
	background-color: #7FA97F;
	padding: 6px 0px;
	filter:alpha(opacity=90);
	-moz-opacity:.90;
	opacity:.90;
	text-align: left;
}
#menu li li:hover ul, #menu li li.over ul { 
/* second-level lists nested under hovered list items */
	display: block;
	left: 90%;
	width: auto;
	top: 16px;
	font: bold 10pt "Trebuchet MS", Verdana, Arial, sans-serif;
	white-space: nowrap;
	background-color: #7FA97F;
	padding: 6px 0px;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	text-align: left;
}
#menu a, #menu a:visited {color:#fff; text-decoration:none; }
#menu a:hover, #menu a:active {color:#000; text-decoration:none; 
	background-color: #96BB96;}
/*end menu*/

Select allOpen in new window