Gladwin James Gladwin James - 2 months ago 6
CSS Question

Navigation at footer in CSS is moving when hovered

I tried implementing a

<nav>
at footer, this is the end result fiddle which is completely wrong, the whole nav moves when its hovered tho I haven't kept anything related to moment. I need the items in
<nav>
to be constant.

Answer

Try this:

footer{
    width: 100%;
    background-color: #222;
    height: 150px;
    margin-top: 50px;
}

.center-footer{
    text-align: center;
}

.footer-nav nav ul li{
    display: inline-block;
    padding: 5px;
    font-size: 18px;
    padding-top: 27px;
    margin-right: 15px;
}

.footer-nav nav ul li a:hover {
    background-color: #111;
    padding: 5px;
}

.footer-nav nav ul li a{
    display: block;
    padding: 5px;
    background-color: #dddddd;
}