<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:100pxmin-height:300pxbackground-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: absolutez-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>
浮动没清除的问题而已，已经帮你加了
有两种方法css实现方法最简单
<style type="text/css">
.htmlcss li{
display:none
}
.htmlcss:hover li{
display:block
}
</style>
<ul class="htmlcss">
方案一：css
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
js实现方法有点复杂
<style type="text/css">
.htmljs li{
display:none
}
.htmljsshow li{
display:block
}
</style>
<ul class="htmljs" onmouseover="this.className='htmljsshow'" onmouseout="this.className='htmljs'" >
方案二：js
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
至于菜单显示位置可以自己调
