let selector = document.querySelector('.activate')
selector.addEventListener('mouseover', function(){
document.querySelector('#hidden-li').classList.remove("hidden")
})
selector.addEventListener('mouseleave', function(){
document.querySelector('#hidden-li').classList.add("hidden")
}).menu-list{
width: 40%;
margin: 0 auto;
border: 1px solid black
}
.menu-list ul{
display: flex;
flex-shrink: 0;
padding: 0;
justify-content: space-evenly;
list-style-type: none;
flex-wrap: wrap;
margin-bottom: 0;
}
.menu-list ul li{
text-align: center;
flex: 1;
border: 1px solid purple;
width: 20%;
}
.menu-list ul li a{
font-size: 1.2rem;
text-decoration: none;
color: black;
}
.hidden {
display: none;
}<div class = "menu-list">
<ul>
<li><a>TEMP1</a></li>
<li><a>TEMP2</a></li>
<li class = "activate"><a>TEMP3</a></li>
<li><a>TEMP4</a></li>
<li><a>TEMP5</a></li>
<li id = "hidden-li" class = "hidden"><a>TEMP6</a></li>
</ul>
</div>I have created a menu list with a total of 5 li items displayed in the same line. When I hover over Temp3, it triggers the visibility of Temp6 to be shown. However, despite trying various CSS settings like setting flex-shrink to zero, enabling flex-wrap and adjusting the width size, I can't seem to get Temp6 to display on a new line. The flex container keeps shrinking the other li items. Any suggestions on how else I can approach this issue?