Hi guys,
I have problem with li list being displayed one on top of the other. This is how my code looks like if you need more info please let me know. The li element should display one after the other.
HTML
<ul class="user-nav__addWatch">
<li class="nav-addWatch">
<div class="addWatch-img">
<img src="img/nat-1.jpg" class="movie-img" alt="rambo">
</div>
<div class="addWatch-name">
<h3>Rambo</h3>
</div>
</li>
<li class="nav-addWatch">
<div class="addWatch-img">
<img src="img/nat-2.jpg" class="movie-img" alt="rambo">
</div>
<div class="addWatch-name">
<h3>Rambo</h3>
</div>
</li>
</ul>
CSS
.user-nav__addWatch {
list-style: none;
position: absolute;
top: 27rem;
right: -3rem;
transform: translate(-72%, -40%);
width: 25rem;
height: 50rem;
background-color: royalblue;
margin-top: 2rem;
visibility: hidden;
box-shadow: 0 1.5rem 4rem rgba($color-grey-dark-1, .4);
}
.nav-addWatch {
display: flex;
align-items: center;
position: absolute;
width: 100%;
height: 13rem;
padding: 1.5rem 2rem;
&:hover {
background-color: red;
}
}
.movie-img {
height: 10rem;
margin-right: 2.5rem;
}
.addWatch-name {
color: $color-grey-dark-1;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .1rem;
}