元素边界正在继续悬停

Question

I want right border to always be static. At this moment, when I hover li element border-right is moving down 5px because of the border-top of 5px on hover.

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

add this at the bottom and it will fix it ^^, by adding padding-bottom on the hover it will compesate the extra pixels that the border top will add, its like 18 - 5 = 13 and the border right will remain the same

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

Answer 2

Set Top border with background color of container like

nav li a {
    border-right: 1px solid #cdcdcd;
    border-top: 5px solid [background-color];
    }

Answer 3

just added one property in your CSS code.

nav li a {
    border-top:5px solid transparent; /* using the transparent border to achieve the result*/
    border-right: 1px solid #cdcdcd;
}

Answer 4

try by adding following code

nav ul li a{
        padding-top:23px;
    }
     nav ul li a:hover{
        padding-top:18px;
     }