Css 将悬停效果添加到flexbox内导航项目的全宽

我想在如图所示的项目上添加悬停效果，但不是边框（仅在示例中显示）

但是我从下面的代码片段中以另一种方式获得了悬停效果，

nav项的高度没有达到flex-box的顶部和底部


*{
边际：0px；
填充：0px；
框大小：边框框；
字体系列：“Lato”，无衬线；
}
.标题{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
背景色：#fff；
长方体阴影：0.5pxRGBA（0,0,0,0.3）；
高度：70像素；
填充：1rem2rem；
字体系列：“Lato”，无衬线；
}
.页眉左{
显示器：flex；
对齐项目：居中；
}
.header__标志{
高度：25px；
右侧填充：10em；
对象匹配：包含；
}
.导航栏{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
列表样式：无；
左侧填充：10px；
}
.navbar\uuu nav li.active-tab{
颜色：#ea2330；
背景颜色：浅灰色；
}
.导航项目{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：100px；
光标：指针；
字体大小：400；
颜色：#666666；
保证金权利：4px；
}
.导航项目：悬停{
颜色：#ea2330；
背景颜色：浅灰色；
}

导航菜单


单位


分支机构


雇员


这就是你想要的吗


*{
边际：0px；
填充：0px；
框大小：边框框；
字体系列：“Lato”，无衬线；
}
.标题{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
背景色：#fff；
长方体阴影：0.5pxRGBA（0,0,0,0.3）；
高度：70像素；
填充：1rem2rem；
字体系列：“Lato”，无衬线；
}
.页眉左{
显示器：flex；
对齐项目：居中；
}
.header__标志{
高度：25px；
右侧填充：10em；
对象匹配：包含；
}
.导航栏{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
列表样式：无；
左侧填充：10px；
}
.navbar\uuu nav li.active-tab{
颜色：#ea2330；
背景颜色：浅灰色；
}
.导航项目{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：100px；
光标：指针；
字体大小：400；
颜色：#666666；
保证金权利：4px；
}
.navbar\uuu nav li.active-tab{
颜色：#ea2330；
背景颜色：浅灰色；
边框颜色：灰色；
边框样式：凹槽；
填充：12px；
}

导航菜单


单位


分支机构


雇员


您遗漏了一些要点。如果您设置了额外的填充或高度，因为在使用display flex时每个项目都是内联块，那么您不能假装是显示块，并期望它完全覆盖其空间。所以我去掉了不正确的填充物等等。我在评论行中提到了我添加和删除的内容


*{
边际：0px；
填充：0px；
框大小：边框框；
字体系列：“Lato”，无衬线；
}
.标题{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
背景色：#fff；
长方体阴影：0.5pxRGBA（0,0,0,0.3）；
/*除去*/
/*高度：100px*/
/*填充：1rem2rem*/
填充：02rem；
/*改变*/
字体系列：“Lato”，无衬线；
}
.页眉左{
显示器：flex；
对齐项目：居中；
}
.header__标志{
高度：25px；
右侧填充：10em；
对象匹配：包含；
}
.导航栏{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
列表样式：无；
左侧填充：10px；
页边距底部：0；
/*增加*/
}
.navbar\uuu nav li.active-tab{
颜色：#ea2330；
背景颜色：浅灰色；
}
.导航项目{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
/*增加*/
宽度：100px；
光标：指针；
字体大小：400；
颜色：#666666；
保证金权利：4px；
高度：80px；
/*增加*/
}
.导航项目：悬停{
颜色：#ea2330；
背景颜色：浅灰色；
}



单位


分支机构


雇员


否不是边框（仅在示例中显示）的高度似乎更大，我现在应该如何降低，因为起初，我在
上有高度。header
，现在您已经删除了该高度。header当前没有固定高度。我把它移走了，这样你就能得到你想要的图像，是的。导航项目影响收割台的高度。如果更改收割台的高度，收割台的高度将自动调整。我把它设为80px，你可以随意更改。谢谢你解释得很好。我会接受这个答案。