请教怎么让弹出菜单在最上面 _HTML/CSS

请问如何让弹出菜单在最上面
ul实现的弹出菜单，但被DIV挡住了；请问CSS里如何解决这个问题。其他Js，HTML解决也可以，最好CSS。3Q，主要代码如下：
.html文件：

HTML code


<link rel="stylesheet" type="text/css" href="menus.css" />
</head>
<body id="bodyContent">
<ul id="nav">
    <li><a href="#">Starters</a>
        <ul>
            <li><a href="">Fish</a></li>
            <li><a href="">Fruit</a></li>
            <li><a href="">Soups</a></li>
            <li><a href="">Fish</a></li>
        </ul></li>
    <li><a href="#">Articles</a>
        <ul>
            <li><a href="">Puddings</a></li>
            <li><a href="">Puddings</a></li>
            <li><a href="">Puddings</a></li>
        </ul></li>
    <li class="buy"><a href="#">Buy Online</a></li>
</ul><!--End of nav.-->
<div id="content">
</div>
</body>

.css文件

CSS code


body {
  font: 1em Verdana, Arial, sans-serif;
  background-color: #FFFFFF;
  color: #000000;
  margin: 1em 0 0 1em;
}
#nav, #nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#nav li {
  float: left;
  position: relative;
  width: 10em;
  border: 1px solid #B0C4DE;
  background-color: #E7EDF5;
  color: #2D486C;
  text-align: center;
  font-size: 80%;
  margin-right: 0;
  padding: 0;
}
#nav a:link, #nav a:visited {
  display: block;
  text-decoration: none;
  padding-left: 0;
  color: #2D486C;
}
* html #nav a {
  width: 100%;
}
#nav ul {
  display: none;
  position: relative;
  padding: 0;
  z-index: 2;
}
#nav ul li {
  float: left;
  border: 0 none transparent;
  border-bottom: 1px solid #E7EDF5;
  border-top: .5em solid #FFF;
  background-color: #F1F5F9;
  font-size: 100%;
  margin-bottom: -1px;
  margin-top: 1px;
  padding: 0;
  z-index: 2;
}
#nav li:hover ul {
  display: block;
  z-index: 2;
}
#nav ul li:hover {
  display: block;
  border: 0 none transparent;
  border-bottom: 1px solid #E7EDF5;
  border-top: .5em solid #FFF;
  background-color: #c0c0c0;
  margin-bottom: -1px;
  margin-top: 1px;
  padding: 0;
  z-index: 3;
}
#content {
  top: 3.6em;
  left: 0;
  width: 100%;
  height: 20em;
  position: absolute;
  /*absolute: bottom; */
  background-color: #CC0033;
  z-index: 1;
}

ID为nav的弹出菜单被ID为content的DIV挡住，想用z-index解决未成功。另外想让点击的target是content怎办？调试通过给分，3Q

------解决方案--------------------
看能不能改成window.createPopup()来实现。那样就不受z-index的限制了。
------解决方案--------------------
<!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=gb2312" />
<title>无标题文档</title>
<style>

body {
font: 1em Verdana, Arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 1em 0 0 1em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
position:absolute;
list-style: none;
z-index:3;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
text-align: center;