HTML - Selectbox Problem With Z-index, When The Selectox Is Open

<!--Start How To Menu-->
<div id="howto" style="top: 3em; right: 0em;">
  <img alt="" src="imagesindex/down-triangle.gif" style="float:right; margin-top:0.3em; margin-left: 0px; margin-right: 1em;" height="10"/>
  How to...<br /> <hr width="80%" style="text-align: left;" />
<!-- Start How To drop-down menu -->
  <a href="membership/index_new.htm">become a member</a>
   ...
  <a href="contact_new.htm">contact a <abbr title="Western Development Museum">WDM</abbr></a>
  <!-- End About drop-down menu -->
</div> <!--End How To Menu-->

body{
background-image:url('imagesindex/background_attempt_fade.jpg');background-position:left;background-repeat:repeat;
  font-family: Arial, Helvetica, sans-serif;
}

/* START topper */
#topper{
	height:4.5em;
	width:50em;
   margin: 20px auto 0 auto;
   position:relative;
   z-index:100;
}

#topper a.contact{
	position:absolute;
        ...
	display:block; 
	z-index:100;
}


/* START howto Menu */
#howto{
	width:15em;
	background-color:#FFF;
	padding-left:2%;
	float:right;
	border:thin gray groove;
	position:absolute; 
	line-height:1.4em; 
	height:1.4em; 
	overflow:hidden;
	z-index:100; 
}


#howto:hover {
	height:auto; 
	cursor:pointer;
}

#howto a {
	display:block; 
	width:100%; 
	line-height:1.4em; 
	color:#000; 
	text-decoration:none;
}

#howto a:visited {
	display:block; 
	width:100%; 
	line-height:1.4em; 
	color:#000; 
	text-decoration:none;
}

#howto a:hover {
	color:#000;
	background:#ddd;
}
/* END howto Menu */
/* END topper */

#wrapper{
   width: 50em;
   background-color:white;
   margin: 5px auto 0 auto;
   border-color:#98B539;
   border-style:ridge;
   border-width:thin;
   z-index:0;
   } 

/* Make branding a positioned element, but don't move it */
#branding{
  position:relative;
  border-bottom:thin #98B539 solid; 
  z-index:0;
}

* { margin: 0; padding: 0; border: none; }
body { padding: 15px 20px 0; color: #777; background: #e3e3e3 url(../images/bg_header.gif) repeat-x 0 0; font: 12px "Tahoma", Verdana, Arial, Helvetica, sans-serif; }
ul { list-style: none; }
input, textarea, select { padding: 5px; background: #fff url(../images/bg_form.gif) repeat-x top left; border: 1px solid #777; font: 12px "Tahoma", Verdana, Arial, Helvetica, sans-serif; }
input.check { padding: 0; background: none; border: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:hover { text-decoration: none; }
:focus { outline: none; }

#head { margin: 0 auto 15px; width: 950px; height: 55px; }
#head img { display: block; float: left; }
#head p { float: right; color: #999; font: 11px Verdana, Arial, Helvetica, sans-serif; }
#head a { color: #666; }
#head span { margin: 0 5px; }

#nav { margin: 0 auto; width: 950px; }
#nav li { margin-right: 5px; height: 30px; display: inline; float: left; position: relative; background: url(../images/nav_bg_left.gif) no-repeat 0 0; }
#nav li span { padding: 5px 13px 0; height: 25px; display: block; background: url(../images/nav_bg_right.gif) no-repeat 100% 0; }
#nav li a { color: #666; font-size: 14px; text-decoration: none; }
#nav li a:hover { text-decoration: underline; }
#nav li a.drop_down { margin-left: 5px; }
#nav li.active, #nav li.temp { background-position: 0 -30px; }
#nav li.active span, #nav li.temp span { background-position: 100% -30px; }
#nav li.active ul, #nav li.temp ul { background: #e3e3e3; }
#nav ul { padding: 12px 12px 2px; width: 150px; position: absolute; top: 30px; left: 0; z-index: 2000; background: #ccc; border: 1px solid #666; border-width: 0 1px 1px; }
#nav ul li { margin: 0 0 10px; padding-left: 14px; height: auto; display: block; float: none; background: url(../images/icon_arrow.gif) no-repeat 0 4px; }
#nav ul li a { font-size: 12px; text-decoration: underline; }
#nav ul li a:hover { text-decoration: none; }

#col_wrap { margin: 0 auto; padding: 20px; width: 950px; }
	#col_left { width: 460px; display: inline; float: left; position: relative; }
	#col_right { width: 460px; display: inline; float: right; position: relative; }
	
	.pagelet { margin-bottom: 10px; width: 460px; display: block; }
		.pagelet_head { padding: 8px 13px 0; width: 434px; height: 22px; position: relative; background: url(../images/bg_pagelet_header.gif) no-repeat 0 0; }
		.pagelet_head h1 { display: inline; float: left; color: #fff; font-size: 12px; }
		.pagelet_head_options { display: inline; float: right; }
		.pagelet_head_options ul { text-align: right; }
		.pagelet_head_options li { margin-left: 10px; display: inline; float: left; }
		.pagelet_head_options li a:hover { background-position: 0 -12px; }
		.pagelet_head_options a.pagelet_drop_down { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_drop_down.gif) no-repeat 0 0; }


		.pagelet_head_options a.pagelet_minimize { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_minimize.gif) no-repeat 0 0; }
		.pagelet_head_options a.pagelet_close { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_close.gif) no-repeat 0 0; }
			.head_red { background-position: 0 0; }
			.head_orange { background-position: 0 -30px; }
			.head_yellow { background-position: 0 -60px; }
			.head_light_green { background-position: 0 -90px; }
			.head_dark_green { background-position: 0 -120px; }
			.head_blue { background-position: 0 -150px; }
			.head_grey { background-position: 0 -180px; }

		.pagelet_content { width: 458px; height: 200px; background: #fff; border: 1px solid #cdcdcd; border-width: 0 1px 1px; }
		.pagelet_shadow { display: block; }

.clear:after { height: 0; display: block; clear: both; visibility: hidden; content: "."; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
<script type="text/javascript" language="javascript" src="js/mootools_1.11.js"></script>
<script type="text/javascript" language="javascript" src="js/functions.js"></script>
</head>
<body>
<div id="head" class="clear">
	<img src="images/placeholder_logo.gif" alt="Logo" width="447" height="55" />
	<p><a href="#" title="Administration">Administration</a><span>|</span><a href="#" title="Settings">Settings</a><span>|</span><a href="#" title="Logout">Logout</a></p>
</div>
<ul id="nav" class="clear">
	<li class="active">
		<span><a href="#">Link</a></span>
	</li>
	<li>
		<span><a href="#">Link 2</a><a href="#" class="drop_down"><img src="images/btn_nav_drop_down.gif" alt="More Options" /></a></span>
		<ul>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
		</ul>
	</li>
	<li>
		<span><a href="#">Link 3</a><a href="#" class="drop_down"><img src="images/btn_nav_drop_down.gif" alt="More Options" /></a></span>
		<ul>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
		</ul>
	</li>
	<li>
		<span><a href="#">Link 4</a></span>
	</li>
	<li>
		<span><a href="#">Link 5</a></span>
	</li>
</ul>
<div id="col_wrap" class="clear">
	<div id="col_left">
		<div class="pagelet">
			<div class="pagelet_head head_red clear">
				<h1>Pagelet Title</h1>
				<div class="pagelet_head_options">
					<ul class="clear">
						<li><a href="#" title="Display Options" class="pagelet_drop_down"></a></li>
						<li><a href="#" title="Minimize Pagelet" class="pagelet_minimize"></a></li>
						<li><a href="#" title="Close Pagelet" class="pagelet_close"></a></li>
					</ul>
				</div>
			</div>
			<div class="pagelet_content"></div>
			<img src="images/shadow_pagelet_bottom.gif" alt="Shadow" width="460" height="10" class="pagelet_shadow" />
		</div>
	</div>
	<div id="col_right">
		<div class="pagelet">
			<div class="pagelet_head head_red clear">
				<h1>Pagelet Title</h1>
				<div class="pagelet_head_options">
					<ul class="clear">
						<li><a href="#" title="Display Options" class="pagelet_drop_down"></a></li>
						<li><a href="#" title="Minimize Pagelet" class="pagelet_minimize"></a></li>
						<li><a href="#" title="Close Pagelet" class="pagelet_close"></a></li>
					</ul>
				</div>
			</div>
			<div class="pagelet_content"></div>
			<img src="images/shadow_pagelet_bottom.gif" alt="Shadow" width="460" height="10" class="pagelet_shadow" />
		</div>
	</div>
</div>
</body>
</html>