Я создал навигацию, которая содержит список, и в настоящее время, когда я нахожу курсор на последних 3 элементах списка, изображение появляется чуть ниже элемента списка (или вкладки).Однако, когда каждое изображение появляется, оно перекрывает карусель начальной загрузки прямо под панелью навигации.Как сделать так, чтобы загрузочная карусель двигалась вниз так, чтобы она находилась чуть ниже изображения, когда изображение появляется при наведении курсора на каждую вкладку?Любые ответы будут полезны.см. ниже код
#nav{
height: 5vw;
width: 80%;
margin-left: auto;
margin-right: auto;
background: gray;
margin-top: 0;
}
#nav-ul li{
display: block;
list-style-type: none;
background: white;
border-radius: 10px;
border: 2px solid blue;
width: 16%;
position: relative;
}
#nav-ul li:not(:first-child){
margin-left: 2%;
}
#nav-ul li a {
color: black;
text-decoration: none;
font-size: 1.1vw;
}
#nav-ul{
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
#nav-ul img{
display: block;
z-index: 1;
}
#li-1 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-1:hover #li-img-1{
display: block;
margin-top: 0;
}
#li-2 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-2:hover #li-img-2{
display: block;
margin-top: 0;
}
#li-3 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-3:hover #li-img-3{
display: block;
margin-top: 0;
}
#myCarousel{
width: 100%;
margin: auto;
background: blue;
color: white;
text-align: center;
height: 3vw;
}
.carousel-inner div{
display: flex;
align-items: center;
height: 3vw;
}
.carousel-inner div p{
line-height: 3vw;
font-size: 1.1vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" width="device-width" initial-scale="1.0">
<title>Money CV</title>
<link href="moneycv.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<ul id="nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">-</a></li>
<li id="li-1"><a href="#">Employee's Portal</a>
<img src="https://www.image.ie/images/no-image.png" id="li-img-1"/>
</li>
<li id="li-2"><a href="#">Services</a>
<img src="https://www.image.ie/images/no-image.png" id="li-img-2"/>
</li>
<li id="li-3"><a href="#">Organising</a>
<img src="https://www.image.ie/images/no-image.png" id="li-img-3"/>
</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<p>Testimonial 1</p>
</div>
<div class="item">
<p>Testimonial 2</p>
</div>
<div class="item">
<p>Testimonial 3</p>
</div>
</div>
</div>
</body>
</html>
`