js 一级菜单纵向的,二级菜单横向的问题

需求:一级菜单是纵向排列的,点击一级菜单的话,旁边会展开横向二级菜单。(内容领域显示不同内容)请求大神:html,css,js能帮我写一段代码吗?先谢谢了。拜托了。自己试... 需求:
一级菜单是纵向排列的,
点击一级菜单的话,旁边会展开横向二级菜单。(内容领域显示不同内容)

请求大神:html,css,js能帮我写一段代码吗?先谢谢了。拜托了。

自己试着做了,可是点击《按钮2》的时候该DIV跑到上面去了,能指点下怎么回事吗?谢谢了。具体代码是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><style>
.bbb1{ width: 300px; height: 20px; display:none; background-color:#33CCFF;}.bbb2{ width: 300px; height: 20px;display:none; background-color:#33CCFF;}.body_menubar{ width:100px; min-height:300px; background-color:#33CCFF;}</style><script>//菜单隐藏显示function show(memu){ if(document.getElementById(memu).style.display=='block'){ document.getElementById(memu).style.display='none'; } else{document.getElementById(memu).style.display='block'; }}</script></head><body> <div class="body_menubar" style="float:left;"> <div class="test" style="position: absolute; z-index:2;"> <div> <div class="aaa1" id="btn" style="float:left"> <a href="javascript:onClick=show('memu1')"> 按钮1</a> </div> <div class="bbb1" id="memu1"> <a href="javascript:onClick=f1(1);"> 菜单1</a> <a href="javascript:onClick=f1(2);"> 菜单2</a> </div> </div> <div> <div class="aaa2" id="btn" style="float:left"> <a href="javascript:onClick=show('memu2')"> 按钮2</a> </div> <div class="bbb2" id="memu2"> <a href="javascript:onClick=f1(1);"> 菜单1</a> <a href="javascript:onClick=f1(2);"> 菜单2</a> </div> </div> </div> </div></body></html>
展开
 我来答
K秩序
2015-09-28 · 超过50用户采纳过TA的回答
知道小有建树答主
回答量:291
采纳率:0%
帮助的人:86.3万
展开全部
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.bbb1{
width: 300px;
height: 20px;
display:none;
background-color:#33CCFF;
}
.bbb2{
width: 300px;
height: 20px;
display:none;
background-color:#33CCFF;
}
.body_menubar{ width:100px; min-height:300px; background-color:#33CCFF;}
</style>
<script>
//菜单隐藏显示
function show(memu){
if(document.getElementById(memu).style.display=='block'){
document.getElementById(memu).style.display='none';
}
else{document.getElementById(memu).style.display='block';
}
}
</script>
</head>
<body>
<div class="body_menubar" style="float:left;">
<div class="test" style="position: absolute; z-index:2;">
<div>
<div class="aaa1" id="btn" style="float:left">
<a href="javascript:onClick=show('memu1')"> 按钮1</a>
</div>
<div class="bbb1" id="memu1">
<a href="javascript:onClick=f1(1);"> 菜单1</a>
<a href="javascript:onClick=f1(2);"> 菜单2</a>
</div>
</div>
<div style="clear:both"></div>
<div>
<div class="aaa2" id="btn" style="float:left">
<a href="javascript:onClick=show('memu2')"> 按钮2</a>
</div>
<div class="bbb2" id="memu2">
<a href="javascript:onClick=f1(1);"> 菜单1</a>
<a href="javascript:onClick=f1(2);"> 菜单2</a>
</div>
</div>
</div>
</div>
</body>
</html>
浮动没清除的问题而已,已经帮你加了
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式