如下面的图片：
QQ图片20180606104812.png
代码的实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.aa{
width: 312px;
height: 570px;
background-color: #F5F5F5;
overflow: hidden;
margin: 50px auto;
}
.bb{
width: 300px;
height: 35px;
background-color: #F5F5F5;
overflow: hidden;
margin: 0px 6px ;
margin-top: 6px;
border-top: 2px solid #019E8B;
}
.jin li{
list-style: none;
float:left;
}
.jin a{
display:block;
overflow: hidden;
float: left;
text-decoration: none;
text-align: left;
margin-top: -26px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
color: black;
}
.jin a:hover{
text-decoration: none;
color: blue;
}
.min li{
list-style: none;
float:right;
}
.min a{
display:block;
overflow: hidden;
float: right;
text-align: right;
margin-top: -25px;
margin-right: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.min a:hover{
text-decoration: none;
color: blue;
}
.cc{
width: 298px;
height: 519px;
background-color: white;
overflow: hidden;
margin: 0px 6px ;
border: 1px solid #DEDDD9;
}
.vv li{
list-style: none;
float:left;
}
.vv a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -500px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 15px;
color: black ;
}
.vv a:hover{
text-decoration: none;
color: blue;
}
.qq li{
list-style: none;
float:left;
}
.qq a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -465px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.qq a:hover{
text-decoration: none;
color: blue;
}
.nn{
width: 270px;
margin: 1px auto;
border-bottom: 1px dashed #DEDDD9;
}
span{
color: black;
}
span:hover{
text-decoration: none;
color: blue;
}
.ll{
color: black;
}
.zz li{
list-style: none;
float:left;
}
.zz a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -460px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 15px;
color: black ;
}
.zz a:hover{
text-decoration: none;
color: blue;
}
.xx li{
list-style: none;
float:left;
}
.xx a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -430px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.oo{
width: 270px;
margin: 1px auto;
border-bottom: 1px dashed #DEDDD9;
}
.xx a:hover{
text-decoration: none;
color: blue;
}
span{
color: black;
}
span:hover{
text-decoration: none;
color: blue;
}
.love li{
list-style: none;
float:left;
}
.love a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -440px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 15px;
color: black ;
}
.love a:hover{
text-decoration: none;
color: blue;
}
.you li{
list-style: none;
float:left;
}
.you a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -405px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.you a:hover{
text-decoration: none;
color: blue;
}
span{
color: black;
}
span:hover{
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<div class="aa">
<div class="bb"></div>
<ul class="jin">
<li><a href="#">近期开班</a></li></ul>
<ul class="min">
<li><a href="#">18年面授开班计划</li></ul>
<div class="cc"></div>
<ul class="vv"><li><a href="#">人工智能+python-高新就业班</a></li></ul>
<ul class="qq">
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a href="#"><span>开放时间:</span>2018-03-23    无座+名额爆满</a></li><br><br>
<li><a href="#"><span class="ll">开放时间:2018-01-23       <span>开班盛况</span></a></li><br><br>
<li><a href="#"><span class="ll">开放时间:2017-12-20       <span>开班盛况</span></a></li><br><br>
<li><a href="#"><span class="ll">开放时间:2017-12-20       <span>开班盛况</span></a></li><br>
<li><a class="nn"></a>></li>
</ul>
<ul class="zz"><li><a href="#">Android开发+测试-高新就业班</a></li></ul>
<ul class="xx">
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a class="oo"></a>></li>
</ul>
<ul class="love"><li><a href="#">大数据软件开发-青芒工作室</a></li></ul>
<ul class="you">
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
</ul>
</div>
</body>
</html>
