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

2012-02-16

请问如何让弹出菜单在最上面ul实现的弹出菜单，但被DIV挡住了；请问CSS里如何解决这个问题。其他Js，HTML解决

请问如何让弹出菜单在最上面
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;

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: block;
position: relative;
padding: 0;
z-index: 3;
}
#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;
}

</style>
</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>
<div id="content">
</div>
</body>
</html>
测试通过的代码，你需要把nav的position显式的设置为absolute
[解决办法]
如果想显示你需要定义必要的宽度．

热点排行