Why does this look wrong in Firefox and Chrome but no in IE?

This css is for a jquery drop down menu.  I've attached an image that shows what's happening...any ideas?

#page-wrap                                          { width: 800px; height: 30px; vertical-align:middle; }
ul                                                      { list-style: none; }

/*
      LEVEL ONE
*/
ul.dropdown                         { background-image:url(shadeup.gif); text-align:center;  }
ul.dropdown li                      { font-weight: normal; float: left; zoom: normal; font: Verdana, Geneva, sans-serif; background-image:url(shadeup.gif); width: 200px;  }
ul.dropdown a:hover                        { color: #000; }
ul.dropdown a:active                { }
ul.dropdown li a                    { display: block; padding: 7px;  #006699;
                                                         color: #ffffff; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #006699; color: black; position: relative; background-image:url(shadeup_or.gif); text-decoration: none }
ul.dropdown li.hover a              { color: #ffffff; text-decoration:none }

/*
      LEVEL TWO
*/
ul.dropdown ul                                     { width: 200px; visibility: hidden; position: absolute; top: 100%; }
ul.dropdown ul li                               { font-weight: normal; background: #006699; color: #000;
                                                        border-bottom: 1px solid #ccc; }
                                                       
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                              { border-right: none; padding: 7px; display:inline-block; }

/*
      LEVEL THREE
*/
ul.dropdown ul ul                               { left: 100%; top: 0; }
ul.dropdown li:hover > ul                   { visibility: visible; }


Here's the html code for the tables:

 <tr>
      <td bgcolor="#006699" style="border-top:solid 2px #000000; border-bottom:solid 2px #000000" background="shadeup.gif" align="center" ><table border="0" cellspacing="0" cellpadding="0" >
        <tr valign="middle">
          <td border="0" cellspacing="0" cellpadding="0"> <div id="page-wrap">
         <table width="800px" border="0" height="30px" style="table-layout:fixed; margin: 0px;">
       

     <ul class="dropdown">
              
              <li><a href="membership_info.php">Membership Information</a>
<ul class="sub_menu">
                           <li><a href="membership_info.php">Membership Options</a></li>
                           <li>
                                <a href="join.php">Join Now</a>
                                
</li>
                           <li><a href="member_login.php">Login to Member's Area</a></li>
                    </ul>
              </li>
cssissue.jpg