HTML UL jumping up when new element is added - html

Question

I have tried to re-produce an example. I have a button when it is hovered it displays UL element. But the problem I have is If you were to try to add more li elements to UL it jumps up or if deleted any li element from existing list it jumps down. I can't figure out what's causing this. Any help appreciated.
.icon-box {
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -170%);
position: relative;
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.btn {
text-decoration: none;
color: black;
background-color: #a05344;
padding: 15px;
}
.container {
display: flex;
}
#nav-like {
position: absolute;
top: 51.5%;
left: 50%;
transform: translate(-82%, -40%);
width: 250px;
background-color: #C05555;
margin-top: 20px;
padding: 10px 30px;
visibility: hidden;
}
.movie-img {
height: 100px;
margin-right: 30px;
}
.like-name,
.like-release-date {
color: #BBBFCA;
font: 14px Arial, sans-serif font-weight:400;
}
.like-release-date {
margin-left: 5px;
}
.icon-box:hover+#nav-like {
visibility: visible;
}
<div class="icon-box">
click me
</div>
<ul id="nav-like">
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
</ul>