废话不说，先上图
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计左侧导航栏</title>
<style>
a{
text-decoration: none;/*去掉字下划线*/
margin: 0 30px;
color: white;
}
nav{
300px;
height: 400px;
}
li{
background-color: rgba(0,0,0,0.7);/*0.7表示透明度*/
overflow: hidden;/*隐藏圆点*/
line-height: 40px;/*行高*/
}
li:nth-of-type(2n){/*2n表示偶数行*/
background-color: rgba(0,0,0,0.9);
}
li:hover{/*hover表示鼠标放上去之后的变化*/
background-color: cadetblue;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" ><span>JavaEE培训</span></a></li>
<li><a href="#" ><span>Android培训</span></a></li>
<li><a href="#" ><span>PHP培训</span></a></li>
<li><a href="#" ><span>UI设计培训</span></a></li>
<li><a href="#" ><span>iOS培训</span></a></li>
<li><a href="#" ><span>前端与移动开发培训</span></a></li>
<li><a href="#" ><span>C/C++培训</span></a></li>
<li><a href="#" ><span>网络营销培训</span></a></li>
<li><a href="#" ><span>游戏开发培训</span></a></li>
<li><a href="#" ><span>云计算之大数据培训</span></a></li>
</ul>
</nav>
</body>
</html>