I'm new at CSS and I'm trying to get this vertical right side menu to work. The problem: when I hover over the images they get bigger (this is intended) but when I hover between the images everything seems to jump and I can't figure out why.
body {
font-family: "Quicksand", sans-serif;
font-size: 18px;
font-weight: 400;
color: #eee4e4;
overflow-x: hidden;
}
ul {
list-style-type: none;
box-sizing: border-box;
float: right;
position: fixed;
z-index: 1000;
right: 0;
top: 0;
height: 100%;
overflow: auto;
text-align: center;
}
li {
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
border: solid 2px blue;
}
img {
height: 40px;
width: 40px;
}
img:hover {
width: 50px;
height: 50px;
}
li:hover {
padding-right: 0px;
padding-bottom: 0px;
}<body>
<!-- Social Media NAV -->
<nav>
<ul>
<li>
<a href="#"><img src="img/facebook1.svg" alt="Facebook"></img>
</a>
</li>
<li>
<a href="#"><img src="img/twitter1.svg" alt="Twitter"></img>
</a>
</li>
<li>
<a href="#"><img src="img/instagram1.svg" alt="Instagram"></img>
</a>
</li>
<li>
<a href="#"><img src="img/whatsapp1.svg" alt="Whatsapp"></img>
</a>
</li>
</ul>
</nav>
</body>