CSS，HTML怎么让竖向一级菜单生成横向二级菜单? 50
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>竖排菜单</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.nav{height:200px;width:400px;}
.nav>ul{height:200px;}
.nav>ul>li:nth-child(1){width:80px;display:inline;}
.nav>ul>li{width:320px;float:left;}
.nav>ul>li>ul>li{float:left; padding:0 5px;}
</style>
</head>
<body>
<!--nav>ui加高度是清楚浮动，可以自行调整-->
<div class="nav">
<ul>
<li><a href="#">菜单</a></li>
<li>
<ul>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</ul>
</ul>
</div>
</body>
</html>
<div class="nav">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
如下图所示：
你给最佳，我给你代码
请问有什么推荐的吗
一般现在用的比较多的前端框架类似bootstrap，angularJs都是可以的，网上也有教程。
<script>
function opens(obj) {
for (var i = 1; i <= 6; i++) {
if (i == obj) {
document.getElementById("dis" + i).style.display = "block";
} else {
document.getElementById("dis" + i).style.display = "none";
}
}
}
</script>
css------------------------------------------
.cp_ym{width:1200px;overflow:hidden;margin:0 auto;}
.cp_ym div{float:left;}
.cp_ym_left{width:240px;height:420px;}
.cp_ym_left ul li{list-style:none;font-size:18px;
text-align:center;height:60px;width:100%;line-height:60px;}
.cp1,.cp2,.cp3,.cp4,.cp5{border-bottom:1px solid #D5D4D4;
border-right:1px solid #D5D4D4;}
.cp6{border-right:1px solid #D5D4D4;}
.cp_ym_right1{width:920px;height:420px;border:1px soild red;display:block;margin-left:30px;}
.cp_ym_right2,.cp_ym_right3,.cp_ym_right4,.cp_ym_right5{margin-left:30px;width:920px;height:420px;display:none;border:1px soild red;}
html-----------------------------------------------------------
<div class="cp_ym">
<div class="cp_ym_left">
<ul>
<li class="cp1"><a onclick="opens(1)">音乐放松系列</a></li>
<li class="cp2"><a onclick="opens(2)">沙盘游戏系列</a></li>
<li class="cp3"><a onclick="opens(3)">宣泄器材系列</a></li>
<li class="cp4"><a onclick="opens(4)">团体活动系列</a></li>
<li class="cp5"><a onclick="opens(5)">心理测评系列</a></li>
<li class="cp6"></li>
</ul>
</div>
<div class="cp_ym_right1" id="dis1">
11111111111111111111111111111
</div>
<div class="cp_ym_right2" id="dis2">
22222222222222222222222222222
</div>
<div class="cp_ym_right3" id="dis3">
33333333333333333333333333333
</div>
<div class="cp_ym_right4" id="dis4">
44444444444444444444444444444
</div>
<div class="cp_ym_right5" id="dis5">
55555555555555555555555555555
</div>
</div>
