如何用js制作，一级菜单纵向的，二级菜单横向的
想用js做展开的导航菜单需求：一级菜单是纵向排列的，点击一级菜单的话，旁边会展开横向二级菜单。（内容领域显示不同内容）问题点是，二级菜单这个要分层吗？要是分层的话坐标不好...
想用js做展开的导航菜单
需求：
一级菜单是纵向排列的，
点击一级菜单的话，旁边会展开横向二级菜单。（内容领域显示不同内容）
问题点是，二级菜单这个要分层吗？要是分层的话坐标不好控制啊。（一级菜单跟内容的DIV是底层，二级菜单是上面的层，position: absolute;z-index: 2;）是这样分吗？还有别的简单的方法吗？
请求：html，css，js能帮我写一段代码吗？先谢谢了。拜托了。 展开
需求：
一级菜单是纵向排列的，
点击一级菜单的话，旁边会展开横向二级菜单。（内容领域显示不同内容）
问题点是，二级菜单这个要分层吗？要是分层的话坐标不好控制啊。（一级菜单跟内容的DIV是底层，二级菜单是上面的层，position: absolute;z-index: 2;）是这样分吗？还有别的简单的方法吗？
请求：html，css，js能帮我写一段代码吗？先谢谢了。拜托了。 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>
RunJS 演示代码
</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
ul li{
height:20px;
cursor:pointer;
}
.wrap {
margin:0 auto;
width: 100px;
}
.menu{
border:1px solid black;
}
.menu>li:not(:last-child){
border-bottom:1px solid black;
}
.menu>li ul{
display:none;
width:300px;
height:20px;
border:1px solid black;
margin:-20px 0px 0px 99px;
}
.menu li:hover{
background-color:#fd3;
}
.menu li:hover ul{
display:block;
background-color:#fd3;
}
.menu>li ul li{
float:left;
padding:0px 10px 0px 10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="menu">
<li>
一级菜单a
<ul>
<li>
二级菜单a
</li>
<li>
二级菜单a
</li>
<li>
二级菜单a
</li>
</ul>
</li>
<li>
一级菜单b
<ul>
<li>
二级菜单b
</li>
<li>
二级菜单b
</li>
<li>
二级菜单b
</li>
</ul>
</li>
<li>
一级菜单c
<ul>
<li>
二级菜单c
</li>
<li>
二级菜单c
</li>
<li>
二级菜单c
</li>
</ul>
</li>
<li>
一级菜单d
<ul>
<li>
二级菜单d
</li>
<li>
二级菜单d
</li>
<li>
二级菜单d
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
更多追问追答
追问
可是傍边有div的话，菜单就呗挡住了啊，这个必须分成吧。（如图：）
追答
你知道设置z-index就可以了啊，明知故问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
