整理一下当悬浮在a元素上时a的上下边颜色改变，并且里面的内容不会移动，下面是PSD图效果区域：
刚开始我先给A元素加了上下边框和颜色，利用a:hover改变a元素上下的边框颜色，但是第一个a元素的下边框和第二个a元素的上边框会并列成2px的线，整体效果上不那么美观：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
line-height: 32px;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
width: 222px;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
ul a:hover{
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
显示的效果：
悬浮时内容不会移动，但是没有悬浮时边框粗细不同
然后是改进版，改进版的代码和效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
line-height: 32px;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
width: 222px;
border-top: 1px solid red;
}
ul a:hover{
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
ul li:last-child a{
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
悬浮时的效果：
在没有悬浮时达到PSD的效果，但是悬浮时出现文字往下跑的情况。由于只是给每个a元素添加了上边框，最后一个a元素给他单独设置了下边框，悬浮时a的上边框颜色变为蓝色，同时添加了一条蓝色的下边框，导致a的内容高度由33变为了34，后面的li整体往下面跑了1px,所以文字会移动。
最后使用绝对定位，悬浮在li上时给a增加两条边框，定位在没有悬浮时边框的Z轴上面，覆盖掉原来的颜色，达到了我想要的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
width: 222px;
position: relative;
border-bottom: 1px solid red;
}
ul li:first-child{
border-top: 1px solid red;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
line-height: 32px;
}
ul li:hover a::after{
position: absolute;
content: "";
width: 222px;
height: 1px;
border-bottom:1px solid blue;
left: 0;
bottom: -1px;
}
ul li:hover a::before{
position: absolute;
content: "";
width: 222px;
height: 1px;
border-top:1px solid blue;
left: 0;
top: -1px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
效果如下：
解决问题的过程中又让我对伪类 ::after ::before有了新的认识. 他们作用是在元素前后分别增加内容，甚至可以是一条 长222px 高1px的红色线，给它相对于li绝对定位覆盖掉红色线条达到效果。
在写这个效果中又碰到问题：上面我是给每个li标签设置了1px的下边框，然后给第一个li标签单独设置了上边框，效果没问题。那么给每个li标签设置1px的上边框，然后给最后一个li标签设置1px的下边框是不是效果一样呢？：
ul{
list-style: none;
}
ul li{
width: 222px;
position: relative;
border-top: 1px solid red; /*这行代码改变了*/
}
ul li:last-child{ /*这行被改变*/
border-bottom: 1px solid red;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
line-height: 32px;
}
ul li:hover a::after{
position: absolute;
content: "";
width: 222px;
height: 1px;
background-color: blue;
left: 0;
bottom: -1px;
}
ul li:hover a::before{
position: absolute;
content: "";
width: 222px;
height: 1px;
background-color: blue;
left: 0;
top: -1px;
}
效果如下：
出现了意想不到的效果，除了最后一个li标签悬浮时上下border被覆盖为蓝色外，其它li标签悬浮时出现了问题：下边框并没有覆盖原来的红色边框，而是被原来的红色边框给覆盖了，加入z-index后效果正常了：
ul li:hover a::after{
position: absolute;
content: "";
width: 222px;
height: 1px;
background-color: blue;
left: 0;
bottom: -1px;
z-index: 1; /*加入的代码*/
}
这种情况是为什么，我也不知道，明天去问老师，哈哈哈。。。。