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

JavaScript016

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>

浮动没清除的问题而已，已经帮你加了

这个是没有办法的。

如果一定要做，可以这样：

1、自定义一个横向的菜单容器。

2、把这个菜单容器作为整体放到一个JMenu下。

不过，我觉得你不如完全自定义一组菜单和二级菜单控件来得快，也方便以后扩展 。

第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的导航栏区域中。Baidu.ComCode52.NetYahoo.Com标签范围中。#menu{font:12pxverdana,arial,sans-serif/*设置文字大小和字体样式*/}#menu,#menuli{list-style:none/*将默认的列表符号去掉*/padding:0/*将默认的内边距去掉*/margin:0/*将默认的外边距去掉*/}中的各条目默认都是纵向排列的，需要定义CSS来让其横向排列起来。Tips：因为现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果在body或其他地方已经重设了默认效果，以上代码可以去掉2、让文字横排标签下的项目默认是纵向排列的，需要定义额外的CSS属性让其横向排列。#menuli{float:left/*往左浮动*/}3、设置链接样式：#menulia{display:block/*将链接设为块级元素*/padding:8px50px/*设置内边距*/background:#3A4953/*设置背景色*/color:#fff/*设置文字颜色*/text-decoration:none/*去掉下划线*/border-right:1pxsolid#000/*在左侧加上分隔线*/}用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：#menulia{display:block/*将链接设为块级元素*/width:150px/*设置宽度*/height:30px/*设置高度*/line-height:30px/*设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中*/text-align:center/*居中对齐文字*/background:#3A4953/*设置背景色*/color:#fff/*设置文字颜色*/text-decoration:none/*去掉下划线*/border-right:1pxsolid#000/*在左侧加上分隔线*/}4、链接悬停效果：通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，可以在CSS悬停属性上定义背景图片。#menulia:hover{background:#146C9C/*变换背景色*/color:#fff/*变换文字颜色*/}这里的代码一个缺陷，最右边会多出来一个边框，由于:first-child伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给HTML代码增加一个额外选择符。Baidu.ComCode52.NetYahoo.com#menulia.last{border-right:0/*去掉左侧边框*/}好了，到这里一个简单的横向导航菜单就制作完成了