Internet Explorer :hover Help

I’m normally pretty good with this stuff, but I feel like I’m missing fairly obvious here. I want a simple hover, drop-down, three level-menu as seen here.

It’s working beautifully in Firefox, Chrome, Safari, etc, but the last level does not appear in IE (in any version). I’m wanting to use tables to make the images display correctly in the menu in IE, so this is what the xHTML looks like on the first “li” on the menu:

<li><a href="http://www.cliffseal.com/brg/real-estate">Real Estate</a>
<ul>
<li>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="50" align="left"><img src="http://www.cliffseal.com/brg/images/homebuyicon.png" width="50px" height="50px" align="left" alt="Find a Home" /></td>
<td valign="middle" align="left">
<h3><a href="#">Find a Home</a></h3>
</td>
<td width="20" align="right"><img src="http://www.cliffseal.com/brg/images/menu_arrow.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></td>
</tr>
</tbody>
</table>
<ul>
<li><a href="http://www.cliffseal.com/brg/home-search"><strong>Home Search</strong></a></li>
<li><a href="#">Relocation</a></li>
<li><a href="#">HUD Homes</a></li>
<li><a href="#">Foreclosures</a></li>
</ul>
</li>
<li>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="50" align="left"><img src="http://www.cliffseal.com/brg/images/soldicon.png" width="50px" height="50px" align="left" alt="Sell Your Home" /></td>
<td valign="middle" align="left">
<h3><a href="#">Sell Your Home</a></h3>
</td>
<td width="20" align="right"><img src="http://www.cliffseal.com/brg/images/menu_arrow.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></td>
</tr>
</tbody>
</table>
<ul>
<li><a href="http://www.cliffseal.com/brg/listing-your-home">Listing Your Home</a></li>
<li><a href="http://www.cliffseal.com/brg/getting-started">Getting Started</a></li>
</ul>
</li>
<li><a href="http://www.cliffseal.com/brg/real-estate/why-backyard-realty-group">Why BRG?</a></li>
<li><a href="http://www.cliffseal.com/brg/use-an-agent">Use an Agent</a></li>
<li><a href="http://www.cliffseal.com/brg/first-time-home-buyer">First-Time Home Buyer</a></li>
<li><a href="#">Mortgage Application</a></li>
<li><a href="http://www.cliffseal.com/brg/real-estate/testimonials">Testimonials</a></li>
<li><a href="#">Agent Referral Form</a></li>
</ul>
</li>

Here’s the CSS (which is nice and botched from trying to figure out what’s causing the non-appearing “ul”):

ul#nav, ul#nav ul {
float : left;
margin : 0 0 0 10px;
padding : 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
line-height: 1;
}
ul#nav a {
display : block;
}
ul#nav li {
float : left;
margin : 0 28px 0 0;
}
ul#nav li li {
margin:0;
width:17em;
}
ul#nav li li li {
margin:0;
width:8em;
}
ul#nav li li a {
padding: 5px 0px 0px 0px;
display: block;
}
ul#nav li ul {
background:#fff;
left:-999em;
position:absolute;
padding: 10px 0px 10px 5px;
width:17em;
z-index:50;
/* for IE */
filter:alpha(opacity=92);
/* CSS3 standard */
opacity:0.92;
}
ul#nav li ul ul {
margin: -3em 0 0 17em;
z-index:55;
width:auto;
display:block;
}
ul#nav li:hover ul ul {
left: -999em;
}
ul#nav li a {
color : #000;
display : block;
}
ul#nav li a:hover, ul#nav li li a:hover {
color : #7f7467;
cursor : pointer;
}
ul#nav li:hover ul, ul#nav li li:hover ul {
left : auto;
}
ul#nav li li:hover ul  {
display:block;
}
ul#nav li.current_page_item a, ul#nav li.current-cat a {
color : #ffffff;
padding : 0 8px 0 8px;
background-color : #852432;
}
ul#nav h3 {
font-size:24px;
}

What the heck am I doing wrong?