Html 用屏幕上的一个列表块替换两个列表块

我有一个导航栏，它从垂直开始，但在屏幕上调整大小将变成水平

我的垂直导航栏有五个链接，但在屏幕调整大小时，我想显示这五个链接中的三个，另一个是一个下拉菜单，显示更多链接（因此，当屏幕调整大小时，总共有四个链接）

我试图隐藏我不想看到的两个链接，当屏幕调整大小时，通过这样做

@media screen and (max-width: 540px) {
    .hide{
        display: none;
    }
}

但这并没有隐藏实际的

li

——只隐藏文本。当它们的悬停属性被执行时，您仍然可以看到

li

（请参阅fiddle以获取演示）

我该怎么办：

当屏幕调整大小时，完全移除我不想要的两个li块

将其替换为一个名为“菜单”的新链接，该链接将保存这些已删除的链接

.nav容器{
右边框：1px实心#e4e2；
身高：100%；
宽度：200px；
背景色：#F4F3；
}
.导航{
文本对齐：对齐；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.导航链路{
显示：块；
文本对齐：左对齐；
颜色：#333；
文字装饰：无；
左边距：0px；
左侧填充：15px；
}
.导航链接：悬停{
背景色：#333；
颜色：#F4F3；
}
美国海军{
宽度：100%；
填充：0px；
}
李国荣先生{
左边距：5px；
列表样式类型：无；
高度：25px；
}
李丽娜先生{
文本对齐：左对齐；
填充物：5px；
颜色：#333；
文字装饰：无；
左边距：15px；
}
李海军：悬停在a上{
颜色：#F4F3；
}
/*询问*/
@媒体屏幕和屏幕（最大宽度：540像素）{
.导航集装箱{
宽度：100%；
高度：100px；
背景色：#F4F3；
边框底部：0.5px实心#f4f3；
}
.导航链路{
填充：10px；
}
.标志架{
溢出：隐藏；
显示：块；
保证金：自动；
宽度：40%；
}
.nav集装箱nav ul{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.标志架{
文本对齐：左对齐；
}
#导航组{
背景色：#F4F3；
边际上限：0；
}
.隐藏{
显示：无；
}
nav ul li{}
}

查看下面的代码

$（文档）.ready（函数（）{
$（“.show”）。单击（函数（）{
$（“.subMenu”）.toggleClass（“活动”）；
返回false；
});
});
ul.子菜单{
显示：无；
}
.子菜单.active{
显示器：flex；
弯曲方向：立柱；
}
李秀{
显示：无；
}
.导航集装箱{
右边框：1px实心#e4e2；
身高：100%；
宽度：200px；
背景色：#F4F3；
}
.导航{
文本对齐：对齐；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.导航链路{
显示：块；
文本对齐：左对齐；
颜色：#333；
文字装饰：无；
左边距：0px；
左侧填充：15px；
}
.导航链接：悬停{
背景色：#333；
颜色：#F4F3；
}
美国海军{
宽度：100%；
填充：0px；
}
李国荣先生{
左边距：5px；
列表样式类型：无；
高度：25px；
}
李丽娜先生{
文本对齐：左对齐；
填充物：5px；
颜色：#333；
文字装饰：无；
左边距：15px；
}
李海军：悬停在a上{
}
/*询问*/
@媒体屏幕和屏幕（最大宽度：540像素）{
.导航集装箱{
宽度：100%；
高度：100px；
背景色：#F4F3；
边框底部：0.5px实心#f4f3；
}
.导航链路{
填充：10px；
}
.标志架{
溢出：隐藏；
显示：块；
保证金：自动；
宽度：40%；
}
导航ul{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.标志架{
文本对齐：左对齐；
}
#导航组{
背景色：#F4F3；
边际上限：0；
}
.隐藏{
显示：无；
}
.表演{
显示：内联块！重要；
}
nav ul li{}
}





















问题的原因是您正在对
标记应用
display:none
。但是，您正在将悬停应用于

.hide:hover {
  background-color: #333;
  color: #f4f3f3;
}

您还可以定义
颜色：#f4f3在同一事物的两个位置。应该只需要一个

编辑：为了确保
在这种情况下是否会出现问题，我不确定。
您的HTML无效-您不能将标记置于
之外。首先将
a
移动到
li
内部，您需要在实际的锚定标记上添加隐藏类，而不仅仅是li