<nav>
<ul>
<li><a href="http://www.pengfeixc.com" target="_blank">pengfeixc.com</a></li>
<li><a href="http://www.weijuan.design" target="_blank">weijuan.design</a></li>
<li><a href="http://mini.pengfeixc.com" target="_blank">mini.pengfeixc.com</a></li>
<li><a href="http://www.pengfeixc.com/about" target="_blank">WangPF</a></li>
</ul>
</nav>
body {
margin: 0px;
padding: 0px;
background: #e74c3c;
font-family: "Lato", sans-serif;
}
nav {
float: none;
clear: both;
width: 30%;
margin: 10% auto;
background: #eee;
}
nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
nav li {
float: none;
width: 100%;
}
nav li a {
display: block;
width: 100%;
padding: 20px;
border-left: 5px solid;
position: relative;
z-index: 2;
text-decoration: none;
color: #444;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li a:hover {
border-bottom: 0px;
color: #fff;
}
nav li:first-child a {
border-left: 10px solid #3498db;
}
nav li:nth-child(2) a {
border-left: 10px solid #ffd071;
}
nav li:nth-child(3) a {
border-left: 10px solid #f0776c;
}
nav li:last-child a {
border-left: 10px solid #1abc9c;
}
nav li a:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 0px;
position: absolute;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index: -1;
}
nav li a:hover:after {
width: 100%;
}
nav li:first-child a:after {
background: #3498db;
}
nav li:nth-child(2) a:after {
background: #ffd071;
}
nav li:nth-child(3) a:after {
background: #f0776c;
}
nav li:last-child a:after {
background: #1abc9c;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.