61,115
社区成员
发帖
与我相关
我的任务
分享FF下层为什么会向上跑？
<!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>
<style type="text/css">
.submenubox{
width:250px;
height:100px;
border:1px solid #666666;
overflow:hidden;
}
.submenu{
margin:0;
padding:0;
width:230px;
background:#FF9;
}
</style>
</head>
<body>
<div id="fastnavi">
<h3>菜单A</h3>
<div class="submenubox">
<ul class="submenu">
<li>子菜单A1</li>
<li>子菜单A2</li>
<li>子菜单A3</li>
<li>子菜单A4</li>
<li>子菜单A5</li>
<li>子菜单A6</li>
<li>子菜单A7</li>
<li>子菜单A8</li>
<li>子菜单A9</li>
<li>子菜单AA</li>
<li>子菜单AB</li>
<li>子菜单AC</li>
<li>子菜单AD</li>
</ul>
</div>
<h3>菜单B</h3>
<div class="submenubox">
<ul class="submenu">
<li>子菜单B1</li>
<li>子菜单B2</li>
<li>子菜单B3</li>
<li>子菜单B4</li>
<li>子菜单B5</li>
<li>子菜单B6</li>
<li>子菜单B7</li>
<li>子菜单B8</li>
<li>子菜单B9</li>
<li>子菜单BA</li>
<li>子菜单BB</li>
<li>子菜单BC</li>
<li>子菜单BD</li>
</ul>
</div>
<h3>菜单C</h3>
<div class="submenubox">
<ul class="submenu">
<li>子菜单C1</li>
<li>子菜单C2</li>
<li>子菜单C3</li>
<li>子菜单C4</li>
<li>子菜单C5</li>
<li>子菜单C6</li>
<li>子菜单C7</li>
<li>子菜单C8</li>
<li>子菜单C9</li>
<li>子菜单CA</li>
<li>子菜单CB</li>
<li>子菜单CC</li>
<li>子菜单CD</li>
</ul>
</div>
</div>
<script type="text/javascript" src="com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#fastnavi>h3').click(function(){
$('.submenubox').css('display','none');
$(this).next().css('display','block');
});
});
</script>
</body>
</html>我这段代码，本意是想在单击<h3>标题时，仅显示它下面紧挨着的子菜单，其余子菜单隐藏。
现在遇到的问题是，在IE6下显示正常，在FF5下,开始显示是正常的（全部显示时），单击鼠标后，第一个子菜单位置向上跑了，看不到“子菜单A1”等文字了。
该怎么做？
...全文
请发表友善的回复…
发表回复
乌镇程序员 2011-08-07
- 打赏
- 举报
FF5.0，没出现你说的情况。
diffmaker 2011-08-07
- 打赏
- 举报
谢谢各位热情帮助，问题已解决。
MuBeiBei 2011-08-07
- 打赏
- 举报
<!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>
<style type="text/css">
.submenubox{
width:250px;
height:100px;
border:1px solid #666666;
overflow:hidden;
position:relative;
}
.submenu{
margin:0;
padding:0;
top:0px;
left:0px;
width:230px;
background:#FF9;
}
</style>
</head>
<body>
<div id="fastnavi">
<h3>菜单A</h3>
<div class="submenubox">
<ul class="submenu">
<li>子菜单A1</li>
<li>子菜单A2</li>
<li>子菜单A3</li>
<li>子菜单A4</li>
<li>子菜单A5</li>
<li>子菜单A6</li>
<li>子菜单A7</li>
<li>子菜单A8</li>
<li>子菜单A9</li>
<li>子菜单AA</li>
<li>子菜单AB</li>
<li>子菜单AC</li>
<li>子菜单AD</li>
</ul>
</div>
<h3>菜单B</h3>
<div class="submenubox">
<ul class="submenu">
<li>子菜单B1</li>
<li>子菜单B2</li>
<li>子菜单B3</li>
<li>子菜单B4</li>
<li>子菜单B5</li>
<li>子菜单B6</li>
<li>子菜单B7</li>
<li>子菜单B8</li>
<li>子菜单B9</li>
<li>子菜单BA</li>
<li>子菜单BB</li>
<li>子菜单BC</li>
<li>子菜单BD</li>
</ul>
</div>
<h3>菜单C</h3>
<div class="submenubox">
<ul class="submenu">
<li>子菜单C1</li>
<li>子菜单C2</li>
<li>子菜单C3</li>
<li>子菜单C4</li>
<li>子菜单C5</li>
<li>子菜单C6</li>
<li>子菜单C7</li>
<li>子菜单C8</li>
<li>子菜单C9</li>
<li>子菜单CA</li>
<li>子菜单CB</li>
<li>子菜单CC</li>
<li>子菜单CD</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#fastnavi>h3').click(function(){
$('.submenubox').css('display','none');
$(this).next().css('display','block');
});
});
</script>
</body>
</html>
去圣西罗-为尤文喝彩 2011-08-07
- 打赏
- 举报
submenu 加 position:relative;top:0 试试。
