css如何解决border的重叠问题

我现在在做一个ul列表，然后给每个li加上边框，但是加完了之后，相邻列表的边框就会变成2px，比如第一个li的下边框和第二个li的上边框就会重叠在一起，请问这有什么办法解决一下么？

解决方法是：

试试给li在样式中指定margin-top:-1px; 这样两个边框就可以重叠在一起了.

新问题：

不过我现在这个li是加了hover的，就是鼠标悬停就会边框变色，这样一来，每个变色的只会是上左右三条框，下边框被盖住，看不出效果了~~~~ 

li {
   border:1px solid #FF0000;
   margin-top:-1px;
}
li:hover {
   border:1px solid #0000FF;
   position:relative;
   z-index:2;
}

这个问题在我工作中很常见，百度搜的这种方法感觉还不错，很实用

来源：CSDN

作者：jingtian678

链接：https://blog.csdn.net/jingtian678/article/details/104536352