Accordion Menu Problems in IE

[madmatter23]

Hello,

I've used some simple jquery in combination with CSS to create an accordion menu for a new website that I'm developing.

The menu works perfectly in safari and firefox, but not at all in IE. I'm not sure where to being to troubleshoot this, as I am not very familiar with jquery.

Here is the relevant code:

Javascript:

<script type="text/javascript" language="javascript" src="css/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	//slides the element with class "menu_subbody" when li with class "menu_subhead" is clicked
	$("#first_pane li.menu_subhead").click(function()
	{
		$(this).css({}).next("ul.menu_subbody").slideToggle(300).siblings("ul.menu_subbody").slideUp("slow");
		$(this).siblings().css({});
	});
	
});
</script>

HTML:

					<div id="first_pane" class="menu_pane">
						<div style="position: relative;"><h3><img src='img/roundedCorners/dark_blue_tr.jpg' class='tr' style="top: 0;" alt="CSS Rounded Corner Image"/>Programs</h3></div>
							<ul>
								<li class="menu_subhead"><a href="#" style="font-weight: bold;">Cardiac CT Practicum</a></li>
									<ul class="menu_subbody">
										<li><a href="#">General</a></li>
										<li><a href="#">Description</a></li>
										<li><a href="#">Lectures</a></li>
										<li><a href="#">Registration</a></li>
										<li><a href="#">Sample Schedule</a></li>
										<li><a href="#">Evaluations</a></li>
										<li><a href="#">Previous Classes</a></li>
										<li><a href="#">Scheduled Dates</a></li>
									</ul>
								<li class="menu_subhead"><a href="#" style="font-weight: bold;">CT Progress and Potential</a></li>
									<ul class="menu_subbody">
										<li><a href="#">General</a></li>
										<li><a href="#">Description</a></li>
										<li><a href="#">Faculty</a></li>
										<li><a href="#">Programs</a></li>
										<li><a href="#">Scheduled Dates</a></li>
									</ul>
								<li><a href="#" style="font-weight: bold;">Why take our course?</a></li>
							</ul>
					</div>
					<!-- end first_pane -->

CSS:

<style type="text/css">
.menu_subbody {
	display: none;
}
.menu_subhead {
	cursor: pointer;
}
</style>

here is a link to the actual site if you want to see it in action


Does anyone have any idea what could be causing this problem? It seems like things always work on firefox and safari, and then IE has to go and mess things up. Perhaps I can incorporate a noscript clause that causes the CSS to define .menu_head {display: inherit;} ?

Any help would be greatly appreciated. Thanks