绝对定位与相对定位的问题,请高人指点迷津!

ccyingfu 2009-06-16 05:02:08
css代码:

#wrap{
width:960px;
margin:0 auto;
}



/* --============================ 主导航 ================================-- */
#nav{
height:40px;
overflow:hidden;
}

#nav ul li{
width:120px;
height:40px;
float:left;
position:relative;
z-index:20px;
}

#nav ul li a{
display:block;
width:120px;
height:40px;
font:900 20px/40px Arial, Helvetica, sans-serif;
text-align:center;
background:#CC0000;
color:#CCFF00;
text-decoration:none;
}

#nav ul li a:hover{
background:#CCFF00;
color:#CC0000;
}


#nav ul li div.outOff{
width:120px;
height:100px;
background:#33FFFF;
color:#000000;
position:absolute;
left:0px;
top:40px;
z-index:1;
}

/* --============================ 主导航(结束) ================================-- */



html代码:

<!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>众联教育</title>
<link href="css/init.css" rel="stylesheet" type="text/css" />
<link href="css/mainStyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">





<!-- 主导航 -->
<div id="nav">
<ul>
<li>
<a href="#">网站首页</a>
</li>
<li>
<a href="#">学校简介</a>
</li>
<li>
<a href="#">IT培训</a>
<div class="outOff">
<span>培训课程</span>
<span>报名条件</span>
<span>名师介绍</span>
<span>学员风彩</span>
</div>
</li>
<li>
<a href="#">金融培训</a>
<div class="outOff">

<span>培训课程</span>
<span>报名条件</span>
<span>名师介绍</span>
<span>合作单位</span>
<span>证书样本</span>
<span>参考教材</span>

</div>
</li>
<li>
<a href="#">建筑培训</a>
</li>
<li>
<a href="#">师资团队</a>
</li>
<li>
<a href="#">校长寄语</a>
</li>
<li>
<a href="#">学历教育</a>
<div class="outOff">
<span>专起本</span>
<span>高起本</span>
<span>工程硕士</span>
</div>
</li>
</ul>
</div>
<!-- 主导航(结束) -->


</div>
</body>
</html>



问题:

为什么在IE和FF中的结果显示不一样呢?哪有问题?在FF中绝对定位的div看不见!
...全文
50 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
saisai123456 2010-10-15
  • 打赏
  • 举报
回复
这是什么代码,本网页的
mike_24 2009-06-17
  • 打赏
  • 举报
回复
夜雨_Jason 2009-06-16
  • 打赏
  • 举报
回复

#nav{
height:40px;
overflow:hidden;
}

去掉 overflow:hidden;就可以了

61,126

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧