HTML/CSS帮助使链接悬停填充整个导航栏

当我们将鼠标悬停在链接上时，我试图使导航栏完全高亮显示，但它目前仅在水平方向工作。我觉得这件事很小，我做错了，我已经试了四个小时了。以下是我的代码：

html，正文{
/*要求html和正文具有100%的高度和宽度，以允许其他子元素使用百分比*/
身高：100%；
宽度：100%；
保证金：0；
}
a{
文字装饰：无；
显示：块；
颜色：黑色；
}
李{
列表样式：无；
}
div{
左缘：2.5%；
保证金权利：2.5%；
利润率最高：1%；
边框：1px纯黑；
}
.内容组{
身高：150%；
利润底部：1%；
}
#页脚{
身高：25%；
利润底部：1%；
}
#横幅{
利润率最高：2.5%；
身高：15%；
位置：相对位置；
}
#横幅img{
宽度：100%；
身高：100%；
}
#导航栏{
填充：0；
身高：5%；
文本对齐：居中；
位置：相对位置；
背景色：#FFCB3D；
}
#纳瓦巴利阿{
显示：块；
文本对齐：居中；
文字装饰：无；
宽度：20%；
身高：100%；
浮动：左；
}
#导航栏ul a：悬停{
身高：100%；
背景色：#FFF17C；
}

采样点

我会让

ul

显示：flex父项从

li

中创建一行，移除

导航栏上的
高度，使其基于内容流动，移除
ul
的默认
边距
，然后在
li
上设置
flex grow:1
（或缩写为
flex:1 0 0
），这样它们将拉伸以均匀填充母体，然后对
li
a
应用垂直
填充，并移除
高度和
浮动


html，正文{
/*要求html和正文具有100%的高度和宽度，以允许其他子元素使用百分比*/
身高：100%；
宽度：100%；
保证金：0；
}
a{
文字装饰：无；
显示：块；
颜色：黑色；
}
李{
列表样式：无；
}
div{
左缘：2.5%；
保证金权利：2.5%；
利润率最高：1%；
边框：1px纯黑；
}
.内容组{
身高：150%；
利润底部：1%；
}
#页脚{
身高：25%；
利润底部：1%；
}
#横幅{
利润率最高：2.5%；
身高：15%；
位置：相对位置；
}
#横幅img{
宽度：100%；
身高：100%；
}
#导航栏{
填充：0；
位置：相对位置；
背景色：#FFCB3D；
文本对齐：居中；
}
ul#导航栏{
显示器：flex；
保证金：0；
}
#navbar li{
弹性：100；
}
#纳瓦巴利阿{
显示：块；
文字装饰：无；
填充：1em 0；
}
#导航栏ul a：悬停{
背景色：#FFF17C；
}

采样点







我会让
ul
显示：flex
父项从
li
中创建一行，移除
导航栏上的
高度，使其基于内容流动，移除
ul
的默认
边距
，然后在
li
上设置
flex grow:1
（或缩写为
flex:1 0 0
），这样它们将拉伸以均匀填充母体，然后对
li
a
应用垂直
填充，并移除
高度和
浮动


html，正文{
/*要求html和正文具有100%的高度和宽度，以允许其他子元素使用百分比*/
身高：100%；
宽度：100%；
保证金：0；
}
a{
文字装饰：无；
显示：块；
颜色：黑色；
}
李{
列表样式：无；
}
div{
左缘：2.5%；
保证金权利：2.5%；
利润率最高：1%；
边框：1px纯黑；
}
.内容组{
身高：150%；
利润底部：1%；
}
#页脚{
身高：25%；
利润底部：1%；
}
#横幅{
利润率最高：2.5%；
身高：15%；
位置：相对位置；
}
#横幅img{
宽度：100%；
身高：100%；
}
#导航栏{
填充：0；
位置：相对位置；
背景色：#FFCB3D；
文本对齐：居中；
}
ul#导航栏{
显示器：flex；
保证金：0；
}
#navbar li{
弹性：100；
}
#纳瓦巴利阿{
显示：块；
文字装饰：无；
填充：1em 0；
}
#导航栏ul a：悬停{
背景色：#FFF17C；
}

采样点







非常感谢您非常感谢