navbar items shaking on hover

April 1, 2022

I am new to learning web designing. I am creating a sample website for my practice. I am stuck on the navbar item issue. after adding a hover effect on list items my items start shaking when I hover on them.

Here is my code:

<nav>
            <div>
            </div>
            <ul>
                <li><a>one</a></li>
                <li><a>two</a></li>
                <li><a>three</a></li>
            </ul>
        </nav>

CSS style:

nav {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-content: center;
    align-items: center;
    width: 100%;
    background-color: #a33454;
}

nav div {
    height: 60px;
    width: 150px;
    margin: 0.5rem;
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin: 0.5rem;
    align-items: center;
    align-content: center;
}

nav ul li {
    font-size: 1.3rem;
    padding: 0.5rem;
    margin: 0.2rem 0.6rem;
}

nav ul li:hover{
    border-bottom: 4px solid #022222;
}

I also created a sandbox demo

>Solution :

This is happening due to the border-bottom which appears when hovering. That is adding 4px to the height.

The best way around it is to also have a border in the not-hovered state but make it invisible.

nav ul li {
    font-size: 1.3rem;
    padding: 0.5rem;
    margin: 0.2rem 0.6rem;
    border-bottom: 4px solid transparent;
}

nav ul li:hover{
    border-bottom: 4px solid #022222;
}

By setting color to transparent, it will be invisible.