Issue with slideToggle in IE7

Issue with slideToggle in IE7


I am using slideToggle to create an accordion effect on a list of
downloads. It works perfectly in FF, Opera, Safari and IE6. But, in
IE7 the table content inside the second level disappears. It is
visible during the sliding animation, just not after it stops. When I
open the content of the <li> with only one level below the two level
<li> the content starts showing up piece by piece. Here is an example
of my code below. Sorry I don't have a live demo.
My function looks like this:
<script type="text/javascript">
$(document).ready(function() {
$('.archiveMenu table tr:odd').addClass('odd');
$('.archiveMenu ul div').next().hide();
$('.archiveMenu div').next().hide();
$('.archiveMenu div').click(function() {
var $table = $(this).next();
$table.slideToggle('fast');
});
});
</script>
Here is a simplified version of the HTML:
<ul class="archiveMenu">
<li><div><span>2007</span></div>
<ul>
<li><div><span>January</span></div>
<table>...</table>
</li><li><div><span>February</span></div>
<table>...</table>
</li><li><div><span>March</span></div>
<table>...</table>
</li>
</ul>
</li>
<li><div><span>2006</span></div>
<table>...</table>
</li>
<li><div><span>2005</span></div>
<table>...</table>
</li>
</ul>
The CSS is very simple and straightforward. No positioning, floats or
display attributes.
Any ideas?