Html 如何将边框悬停在菜单上

我需要在菜单的每一部分都做边框悬停。 在第一部分中，它是可以的，但当我将鼠标悬停在其他元素上时，左边框和菜单看起来很糟糕

我不需要在每一边（左，右）双边界，需要一个边界左，一个边界右在正常状态和悬停状态

示例：

---

我需要的悬停示例：

去掉CSS中的第26行，就可以开始了。

删除

边框左侧宽度：1来自
.clt\u导航选项卡ul li a{
（第26行）

刚刚注意到用户1702965已经建议删除第26行：）
这是因为您的边框在正常状态和悬停状态下的大小不同

在正常状态下，使用您的代码：

border: 1px solid #E5E3E3;
border-left-width: 0;

您有边框（顶部、右侧、底部、左侧）（1px、1px、1px、0px）

但在悬停状态下，使用代码

border: 1px solid #f88307;

您有边框（顶部、右侧、底部、左侧）（1px、1px、1px、1px）。
因此，这意味着在悬停状态下，菜单的总大小要大1倍。防止菜单在进入悬停状态时变大的一个技巧是在两种状态下固定其大小。例如，您可以替换该行（在正常状态下）：

顺便说一句：

border-left: 1px solid #f7f7f7;

这样，您的菜单将始终在每边有1px边框。
尝试左边框：0；在.clt_nav_选项卡ul li a:hover class
仅更改第39行的边框颜色。
添加边框会影响
li
的
宽度

相反，尝试使用

outline: 1px solid #f88307;

请更详细地解释一下，在哪里以及为什么你认为它会变糟。没有什么不同，我看起来没问题。问题是什么？更多的问题是，我更新了我的帖子，但我需要在正常状态下在左边用橙色边框替换？是的，你有左边边框宽度：0；这不是我需要的。我需要每个第1行边框（上、右、下、左）
outline: 1px solid #f88307;