Html 覆盖活动li的边框不会'；当固定菜单有溢出-y时不工作

因此，我想要一个简单的菜单，右边框为1px黑色。然后，我希望活动li覆盖

右边框

到

1px白色

。我的代码有效，除非我将

overflow-y:scroll

添加到我的固定菜单

在这里你可以看到我的意思，有一个固定的菜单，可滚动，但活动的样式不起作用。如果您对overflow-y行进行注释，您将看到激活的样式确实有效

菜单{
右边框：1px纯黑；
框大小：边框框；
宽度：100px；
高度：200px；
左：0；
排名：0；
位置：固定；
溢出y：滚动；/*注释此行*/
}
保险商实验室{
列表样式：无；
宽度：100px；
保证金：0；
填充：0；
}
李{
高度：40px；
边框底部：1px纯黑；
宽度：100px；
}
a{
高度：40px；
宽度：100px；
显示：块；
框大小：边框框；
}
a、 活跃的{
右边框：1px纯白；
}

马铃薯
奶酪
西红柿
黄瓜
胡萝卜
大蒜

不要固定菜单的宽度，请将其设置为“自动”

看到它的工作，我改变了活动边框颜色为红色的可视性

菜单{
框大小：边框框；
宽度：自动；
高度：200px；
左：0；
排名：0；
位置：固定；
/*溢出：可见*/
溢出y：滚动；/*注释此行*/
}
保险商实验室{
列表样式：无；
宽度：100px；
保证金：0；
填充：0；
}
李{
高度：40px；
边框底部：1px纯黑；
宽度：100px；
}
a{
高度：40px；
宽度：100px；
显示：块；
框大小：边框框；
右边框：1px纯黑；
}
a、 活跃的{
右边框：1px纯红；
}

马铃薯
奶酪
西红柿
黄瓜
胡萝卜
大蒜

使用

：在
选择器之后，您可以实现这一点


.menu{
框大小：边框框；
宽度：自动；
高度：200px；
左：0；
排名：0；
位置：固定；
溢出y：滚动；/*注释此行*/
}
.菜单：之后{
内容：“；
位置：绝对位置；
宽度：1px；
身高：123%；
背景：#000；
右：0；
排名：0；
z指数：0；
}
保险商实验室{
列表样式：无；
宽度：100px；
保证金：0；
填充：0；
位置：相对位置；
z指数：1；
}
李{
高度：40px；
边框底部：1px纯黑；
宽度：100px；
}
a{
高度：40px；
宽度：100px；
显示：块；
框大小：边框框；
//右边框：1px纯黑；
}
a、 活跃的{
右边框：1px纯红；
}


马铃薯
奶酪
西红柿
黄瓜
胡萝卜
大蒜

滚动条后面出现的边框是一种奇怪的行为

但是如果你想要一个解决方案来获得最终的输出。检查下面的共享代码段


*{
框大小：边框框；
/*浏览器重置代码*/
}
.菜单{
宽度：100px；
高度：计算（40px*6）；
/*UL的实际高度*/
填充：0；
右边框：1px纯红；
保证金：0；
列表样式：无；
}
.祖父母{
宽度：100px；
溢出：隐藏；
高度：200px；
位置：固定；
左：0；
排名：0；
}
.家长{
溢出y：滚动；
高度：200px；
宽度：125px；
/*宽度+大约滚动条宽度*/
}
李{
高度：40px；
边框底部：1px纯黑；
宽度：100px；
}
a{
高度：40px；
宽度：100px；
显示：块；
框大小：边框框；
}
a、 活跃的{
右边框：1px纯白；
}


马铃薯

奶酪

西红柿

黄瓜

胡萝卜

大蒜


正在工作

删除菜单中的边框样式并添加到li元素中

li{
  border-right: 2px solid blue;
  height: 40px;
  border-bottom: 1px solid white;
  width: 100px;
}
li .active{
  border-right: 2px solid white!important; 
  /* border-right: 2px inset #fff!important; */
}

请按如下所示更改代码。我的编辑被评论。解释在代码片段下面


菜单{
/*右边框：1px纯黑；*//*我删除了这一行*/
框大小：边框框；
宽度：100px；
高度：200px；
左：0；
排名：0；
位置：固定；
溢出y：滚动；
}
保险商实验室{
列表样式：无；
宽度：100%；/*从px更改为%*/
保证金：0；
填充：0；
}
李{
高度：40px；
边框底部：1px纯黑；
宽度：100%；/*从px更改为%*/
}
a{
右边框：1px纯黑；/*我添加了这个*/
高度：40px；
宽度：100%；/*从px更改为%*/
显示：块；
框大小：边框框；
}
a、 活跃的{
右边框：1px纯白；
}


马铃薯
奶酪
西红柿
黄瓜
胡萝卜
大蒜

这不起作用，它只是在父边框旁边添加边框：|抱歉，我没有完全理解。你有没有在我的回答中运行这个片段。红色边界？好啊请告诉我它缺少了什么？我非常抱歉误解了，没有注意到它。问题是，将边框向右移动到a标签，意味着菜单的其余部分（ul之外的其他项目）将没有正确的边框。。。但如果我只是在每个元素上分别添加边框，可能会更好…菜单包含许多其他内容。。。除了这个，你给了我一个解决办法的想法！但为什么这不起作用，有什么线索吗？在菜单中添加边框更新我的答案，使用
：在
选择后，该样式确实适用。你看不到边框的原因是没有考虑滚动条的宽度，因此它被滚动条遮住了——但右边确实有一个白色边框！！！叹息。。。如果只有
：：-webkit滚动条
将具有跨浏览器支持。