清明节已过，开始努力工作学习！
!DOCTYPE html>
CSS3带动画特效的垂直导航菜单
标签定义文档与外部资源的关系
rel:规定当前文档与被链接文档之间的关系
href: 规定被链接文档的位置。超文本链接引用
a标签作用：超链接可以包裹任何东西
div span:容器功能：1，结构化分文别类2.绑定化操作-->
-
注册蓝轨迹培训中心
WEB前端、后端、移动端、微信开发
-
寻找更多好课
WEB前后端基础课、进阶课、高级课
-
今日最新优秀课程
每日更新更多、更优秀的开发课
-
我学习过的课程
我爱学、我学过、我喜欢的课程
-
每日好礼优惠多
每日不同的优惠、不同的学习礼包奉送
css部分
ul{
padding: 0;
margin: 0;
list-style: none;
}
div#nav-menu{
width: 500px;
margin: 200px auto;
}
h1,h2,h3,h4,h5,h6,p{
font-weight: normal;
margin: 0;
}
div#nav-menu ul li{
width: 100%;
height: 100px;
border-left: 10px solid #000;
box-shadow: 1px 2px 3px #666;
margin-top: 5px;
box-sizing: border-box;
transition: all 0.3s linear;
}
div#nav-menu ul li a{
display: block;
width: 100%;
height: 100%;
}
div#nav-menu ul li a div{
float: left;
box-sizing: border-box;
}
div#nav-menu ul li a div.left{
width: 100px;
height: 100%;
text-align: center;
line-height: 100px;
}
div#nav-menu ul li a div.left span{
color: #000;
font-size: 25px;
transition: all 0.3s linear;
}
div#nav-menu ul li a div.right{
width: 390px;
height: 100%;
padding: 20px 30px 20px 0;
}
div#nav-menu ul li a div.right h3{
color: #000;
transition: all 0.3s linear;
}
div#nav-menu ul li a div.right p{
color: #666;
font-size: 14px;
margin: 7px;
transition: all 0.3s linear;
}
div#nav-menu ul li:hover{
border-color: #FBD04F;
background-color: #000;
}
div#nav-menu ul li:hover a div.left span.fa{
color: #FBD04F;
transform: scale(2);
}
div#nav-menu ul li:hover a div.right h3{
font-size: 14px;
color: #fff;
}
div#nav-menu ul li:hover a div.right p{
font-size: 20px;
color: #FBD04F;
}
原文地址：http://blog.51cto.com/13687572/2095555