如何使李在新行中显示

Question

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>

我有一份菜单清单。当你们看的时候，在同一条线上总共会有5里。现在，当我将鼠标悬停在Temp3上时，将显示li Temp6。然而，无论我怎么尝试，我都无法在新的行中显示这个东西。flex容器总是收缩其他li的大小。我曾尝试将flex收缩设置为零，确保启用flex包装，宽度：20%；否则我该怎么解决我的问题？

Answer 1

据我所知，您希望将前5个元素保持在同一行上，将第6个元素保留在新行上。。。为了做到这一点，您需要设置"；显示"；至"；内联"；而不是"；flex"；对于最后一个元素，您需要设置"；显示"；至"；块"；，这样你就可以获得想要的输出。。。

以下是一个简化的css示例：

ul li {
display:inline;
color:red;
}
ul li:last-child {
display:block;
color:green;
}

因此，最后一个元素将具有一种样式；显示：无"；或"；显示：块"；