Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

element border is moving on hover

element border is moving on hover

Problem

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

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/

Problem courtesy of: Filip Grkinic

Solution

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;
}
Solution courtesy of: ZetCoby

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

element border is moving on hover

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×