CODEWITHSUNDEEP
htmlcsshover
Filip Grkinic
Filip Grkinic

Reputation: 130

element border is moving on hover

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/

Upvotes: 0

Views: 1268

Answers (4)

Sarath
Sarath

Reputation: 608

try by adding following code 

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

Upvotes: 0

ZetCoby
ZetCoby

Reputation: 638

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;
}

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10265

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;
}

Upvotes: 0

Dharmesh
Dharmesh

Reputation: 132

Set Top border with background color of container like

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

Upvotes: 0

Related Questions