html - 元素边框在悬停时移动

Question

我希望右边框始终是静态的。 此时，当我悬停 li 元素时，右边框向下移动 5px，因为悬停时 border-top 为 5px。

HTML

<nav>
   <ul>
     <li><a href="link1">link1</a></li>
     <li><a href="link2">link2</a></li>
     <li><a href="link3">link3</a></li>             
     <li><a href="link4">link4</a></li>
   </ul>
  </nav>

CSS

    nav li a {
    border-right: 1px solid #cdcdcd;
    }
    nav ul li:first-child a:hover {
        border-top:5px solid #d1e751;
    }
    nav ul li:nth-child(2) a:hover {
        border-top: 5px solid #F06B50;
    }
    nav ul li:nth-child(3) a:hover {
        border-top: 5px solid #eee;
    }
    nav ul li:last-child(4) a:hover {
        border-top: 5px solid #a8def4;
    }

http://jsfiddle.net/Xfy6P/

Answer 1

在底部添加它，它会修复它 ^^，通过在悬停时添加 padding-bottom 它将补偿边框顶部将添加的额外像素，就像 18 - 5 = 13 并且边框右侧将保留一样的

nav ul li a:hover{
    padding-bottom:13px;
}