CODEWITHSUNDEEP
csshtmlnav
Jess McKenzie
Jess McKenzie

Reputation: 8385

Nav Menu Jerky with hover

How could I stop the jerkiness in my hover it seems to move a few pixels:

CSS: 

header nav ul li{
    list-style:none;
    display:inline-block;
}
header nav li a {
    color:#8f3479;
    text-align:center;
    width:30px;
    padding:15px;
}
header nav li a:hover, .current{
    padding:15px;
    font-weight:bold;
    background-color:#8f3479;
    border-radius:5px;
    color:#fff;
}

HTML:

<header>
        <div class="branding"></div>
            <nav>
                <ul>
                    <li><a class="current" href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            <nav>   
  </header>

Upvotes: 0

Views: 218

Answers (1)

Keith
Keith

Reputation: 1394

It's happening because of the bold treatment on the hover state. If you add bold to the regular links as well, it will remain the same for both states. see this fiddle for example - http://jsfiddle.net/ZhM3T/1/

Upvotes: 1

Related Questions