Css navigation problem in ie - fine in firefox

Hi,

I have tweaked something in my code and it has messed up my navigation bar. The navigation on the left side of the page works fine in Firefox. But in IE, the sub menus drop way way way down when you click on the main link.

For example, if you click on the “LifeCare” Link, the sub menus drop way down below the viewing page. I am still trying to find the problem, but so far not successful.

Link to page is here: http://www.sitesbysarah.com/floating_index_work_file.php

Navigation css code is below:



#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
#nav dt b, #nav dt a {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase; 
padding: 10px 10px; 
background: #333399 url(images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}

#nav dt b {background:url(mini_leaf.jpg) no-repeat left center;
padding: 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right; 
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}

#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; }


Can anyone see what I am missing?

Thanks,
sarb

It’s working fine in the latest IE (version 9).