[SOLVED] Z-Index not working properly in IE

[Hartley]

Here is the test site I'm filling out:

 

http://www.castbuzz.com/test/

 

In IE, the menu is going under the mini-menu below it. For reference sake, here is the CSS from the area in question:

 

CSS

/* drop down menu */
#menu ul {
position:absolute;
top:52px;
left:0;
display:none;
padding:0;
margin:0;
list-style:none;
width:196px;
border:1px solid #304878;
border-width:0 1px 1px;
z-index:10;
}

#menu ul li {
float:left;
width:196px;
z-index:10;
}

#menu ul li a {
font:12px/28px Arial, sans-serif;
color:#fff;
background:url(../images/bg-drop.jpg) repeat-x;
padding:0 0 0 13px;
width:183px;
text-decoration:none;
}

#menu ul li a:hover { background:url(../images/bg-drop-over.jpg) repeat-x; }

 

HTML

			<!--content-->
		<div id="content">
			<!--menu-->
			<ul id="menu">
				<li><a href="#" class="home">Home</a></li>
				<li><a href="#" class="news">Latest News</a></li>
				<li>
					<a href="#" class="students">CP Students</a>
					<ul>
						<li><a href="#">Overview</a></li>
						<li><a href="#">Optimizing Your Program</a></li>
						<li><a href="#">Program Guides</a></li>
						<li><a href="#">In the Area</a></li>
						<li><a href="#">Feature Articles</a></li>
						<li><a href="#">Submit a Guide/Link</a></li>
					</ul>
				</li>
				<li>
					<a href="#" class="alumni">CP Alumni</a>
					<ul>
						<li><a href="#">Overview</a></li>
						<li><a href="#">In the Area</a></li>
						<li><a href="#">Helping New CP Students</a></li>
						<li><a href="#">Share Your Experience</a></li>
						<li><a href="#">Submit a Guide/Link</a></li>
					</ul>
				</li>
				<li>
					<a href="#" class="campus">Campus Reps</a>
					<ul>
						<li><a href="#">Overview</a></li>
						<li><a href="#">Campus Outreach</a></li>
						<li><a href="#">Submit a Guide/Link</a></li>
					</ul>
				</li>
				<li><a href="#" class="forums">Community Forums</a></li>
			</ul>
			<!--main box-->
			<div class="box">
				<div class="box-bg">
					<div class="box-info">
						<div class="maincolumn">
							<ul id="nav-b">
								<li><a href="#" class="news">Latest News</a></li>
								<li><a href="#" class="guides">Program Guides</a></li>
								<li><a href="#" class="articles">Buzz Articles</a></li>
								<li><a href="#" class="journal">Site Journal</a></li>
							</ul>
						</div>
						<div class="sidecolumn">Test</div>
					</div>
				</div>
				<div class="box-foot"> </div>
			</div>
		</div>

 

Undoubtedly I'm misunderstanding the concept =[ Thanks in advance for your help!