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

JavaScript012

js 一级菜单纵向的，二级菜单横向的问题,第1张

<!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: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>

至于菜单显示位置可以自己调