Html 在中应用显示块：完全悬停

我试图在我的

nav

li

元素中创建一个背景颜色变化悬停的菜单，但它工作不好，它没有覆盖整个边框的黄色，我尝试使用

left:0

但什么都没有

特别是第一个和最后一个

li

s没有覆盖元素的所有宽度

.nav{
背景色：rgb（214,19,25）；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：moz线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：-o-线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
边框：2倍实心rgb（130,0,0）；
边界半径：10px；
宽度：943px；
浮动：左；
保证金：0自动；
填充：0；
位置：相对位置；
z指数：1
}
美国海军{
保证金：0；
显示：块；
}
李国荣先生{
显示：内联块；
填充：10px 30px；
字体系列：“奎托斯真实类型”；
字体大小：24px；
右边框：3倍实心rgb（101,0,3）；
保证金：0；
}
李丽娜先生{
颜色：rgba（255，255，255，1）；
}
.nav ul.firstnav{
左侧填充：0；
}
.nav ul.lastnav{
右边界：0；
}
李丽娜先生{
文字装饰：无；
}
.nav ul li:悬停{
背景：rgba（255,186,0,1）；
}

黄色背景没有覆盖所有内容的原因是无序列表（ul）有一个未重置的填充（）

我稍微更改了一下您的代码：

.nav{
背景色：rgb（214,19,25）；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：moz线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：-o-线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
边框：2倍实心rgb（130,0,0）；
边界半径：10px；
浮动：左；
保证金：0自动；
宽度：880px；
填充：0；
位置：相对位置；
z指数：1
}
美国海军{
保证金：0；
显示：块；
填充：0；
}
李国荣先生{
显示：内联块；
填充：10px 30px；
字体系列：“奎托斯真实类型”；
字体大小：24px；
右边框：3倍实心rgb（101,0,3）；
保证金：0；
}
李丽娜先生{
颜色：rgba（255，255，255，1）；
}
.nav ul.firstnav{
左侧填充：0；
}
.nav ul.lastnav{
右边界：0；
}
李丽娜先生{
文字装饰：无；
}
.nav ul li:悬停{
背景：rgba（255,186,0,1）；
}

试试这个。我刚刚对你的代码做了一些修改

.nav{
背景色：rgb（214,19,25）；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：moz线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：-o-线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
边框：2倍实心rgb（130,0,0）；
边界半径：10px；
宽度：自动；
浮动：左；
保证金：0自动；
填充：0；
位置：相对位置；
z指数：1
}
美国海军{
保证金：0；
填充：0；
显示：块；
}
李国荣先生{
显示：内联块；
填充：0；
字体系列：“奎托斯真实类型”；
字体大小：24px；
右边框：3倍实心rgb（101,0,3）；
保证金：0；
浮动：左；
}
李丽娜先生{
颜色：rgba（255，255，255，1）；
填充：10px 20px；
显示：块；
}
.nav ul.firstnav{
左侧填充：0；
}
.nav ul.lastnav{
右边界：0；
}
李丽娜先生{
文字装饰：无；
}
.nav ul li:悬停{
背景：rgba（255,186,0,1）；
}
.nav ul.firstnav{
边界半径：10px 0 10px；
}
.nav ul.lastnav{
边界半径：0 10px 10px 0；
}

我建议使用flexbox（注意我减少了

5px

您的

nav

宽度

，并在

nav ul li

中增加了一点侧边

填充

，以完全适合悬停背景）：

.nav{
背景色：rgb（214,19,25）；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：moz线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：-o-线性梯度（rgb（215,19,25），rgb（163,6,11））；
背景：线性梯度（rgb（215,19,25），rgb（163,6,11））；
边框：2倍实心rgb（130,0,0）；
边界半径：10px；
宽度：938px；
/*浮动：左*/
显示器：flex；
保证金：0自动；
填充：0；
位置：相对位置；
z指数：1
}
美国海军{
保证金：0；
填充：0；
显示器：flex；
柔性流：行换行；
证明内容：中心；
}
李国荣先生{
显示器：flex；
填充：10px 36px；
/*字体系列：“奎托斯真实类型”*/
字体大小：24px；
右边框：3倍实心rgb（101,0,3）；
保证金：0；
}
李丽娜先生{
颜色：rgba（255，255，255，1）；
}
.nav ul.firstnav{
左侧填充：30px；
边框左上半径：6px；
边框左下半径：6px；
保证金：0；
}
.nav ul.lastnav{
右边界：0；
右侧填充：30px；
边框右上角半径：6px；
边框右下半径：6px；
保证金：0；
}
李丽娜先生{
文字装饰：无；
}
.nav ul li:悬停{
背景：rgba（255,186,0,1）；
保证金：0；
}