Html 如何在新品中实现li显示

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”）
})

。菜单列表{
宽度：40%；
保证金：0自动；
边框：1px纯黑
}
.菜单列表{
显示器：flex；
弹性收缩：0；
填充：0；
对正内容：空间均匀；
列表样式类型：无；
柔性包装：包装；
页边距底部：0；
}
.菜单列表{
文本对齐：居中；
弹性：1；
边框：1件纯色紫色
宽度：20%
}
.菜单列表ul li a{
字号：1.2rem；
文字装饰：无；
颜色：黑色；
}
.隐藏{
显示：无；
}

TEMP1
临时2
TEMP3
临时4
TEMP5
TEMP6

据我所知，您希望将前5个元素保留在同一行上，将第6个元素保留在新行上。。。为了做到这一点，您需要将“display”设置为“inline”，而不是“flex”，并且对于最后一个元素，您需要将“display”设置为“block”，这样您就可以实现所需的输出

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

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

---

因此，最后一个元素的样式为“display:none”或“display:block”

width:100%到最后一个li