CSS/Jquery dropdown z-index issue in IE - content being pushed rather than overlayed?

CSS/Jquery dropdown z-index issue in IE - content being pushed rather than
overlayed?

I'm trying to create a simple dropdown menu which, using z-index, should
overlay the content below it. The code below works fine in other browsers
but in IE8 (which is my corporate browser) it 'pushes' the content below
it. Based on this code can anyone see why it's doing this?
Thanks in advance!
<SCRIPT type=text/javascript>
$(document).ready(function() {
//toggle equipment menu
$('img#PrimarySelectButtonImg').click(function () {
$('ul#PrimarySelectMenu').slideToggle('fast');
});
});
</SCRIPT>
<STYLE>
<!--
a:active, a:focus {
outline: none;
text-decoration: none;
border-bottom: 0px;
ie-dummy: expression(this.hideFocus=true);
}
a:hover {
text-decoration: none;
border-bottom: 0px;
}
#PrimarySelectArea {
height: 46px;
width: 272px;
cursor: pointer;
position: relative;
z-index: 100;
}
#PrimarySelectMenu {
display: none;
width: 268px;
border: 1px solid #ccc;
background-color: #fff;
}
.the_menu li {
padding: 15px 5px;
display: block;
}
.the_menu li:hover {
background-color: #f1f0ce;
}
.the_menu li a {
color: #666;
text-decoration: none;
}
.the_menu li a:hover {
color: #666;
background-color: #f1f0ce;
}
#MainTableHolder {
position: relative;
z-index: -1;
}
-->
</STYLE>
<div id="kbankContainer">
<div id="PrimarySelectArea"> <img src="images/PrimarySelectButton.png"
width="272" height="38" id="PrimarySelectButtonImg" />
<ul id="PrimarySelectMenu" class="the_menu">
<li><a href="#">PRODUCT INFORMATION</a></li>
<li><a href="#">PROTOCOLS</a></li>
<li><a href="#">FORMS</a></li>
<li><a href="#">INFORMATION</a></li>
</ul>
</div>
<!-- begin tools table -->
<div id="MainTableHolder">
<table border=0 cellspacing=0 cellpadding=4 width="100%">
<thead>
<tr>
<th width="36%" align=left>&nbsp;</th>
<th width="32%" align=left>&nbsp;</th>
<th width="32%" align=left>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>first row of table</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>
Again, thanks for any help!