Html 悬停菜单跳转

我正在使用bootstrap 4m构建菜单，但我遇到了一个无法解决的问题

header>nav{
背景色：#fff；
}
navbar先生{
垫面：1.6rem；
垫底：1.6rem；
}
.导航栏导航>李>a{
字体大小：1.4rem；
颜色：#504843；
文本转换：大写；
字母间距：.1rem；
字号：700；
右边距：2em；
}
.导航栏导航>李>a:悬停，
.navbar导航>李>a：焦点{
背景：无；
字体大小：1.4rem；
颜色：#262423；
边框底部：.3rem实心#ff5f06；
字母间距：.1rem；
}
.navbar nav>li:最后一个孩子{
右边距：-2em；
}

您可以在此处看到工作示例： jsfiddle.net/n5f2b4qk/

由于底部边框为：3rem solid#ff5f06

有两种方法可以避免它

在元素后面设置边框（如示例所示）

.导航栏导航>李>a{ 字体大小：1.4rem； 颜色：#504843； 文本转换：大写； 字母间距：.1rem； 字号：700； 右边距：2em； 位置：相对位置； }

.导航栏导航>李>a:悬停， .navbar导航>李>a：焦点{ 背景：无； 字体大小：1.4rem； 颜色：#262423； 字母间距：.1rem； }

.navbar导航>李>a:悬停：之后， .navbar导航>李>a:焦点：之后{ 内容：“； 位置：绝对位置； 显示：块； 左：0； 右：0； 底部：0； 高度：.3rem； 背景#ff5f06； }

另一个选项是为元素设置透明边框，并使用鼠标悬停更改颜色

---

您可以在此处看到工作示例： jsfiddle.net/n5f2b4qk/

由于底部边框为：3rem solid#ff5f06

有两种方法可以避免它

在元素后面设置边框（如示例所示）

.导航栏导航>李>a{ 字体大小：1.4rem； 颜色：#504843； 文本转换：大写； 字母间距：.1rem； 字号：700； 右边距：2em； 位置：相对位置； }

.导航栏导航>李>a:悬停， .navbar导航>李>a：焦点{ 背景：无； 字体大小：1.4rem； 颜色：#262423； 字母间距：.1rem； }

.navbar导航>李>a:悬停：之后， .navbar导航>李>a:焦点：之后{ 内容：“； 位置：绝对位置； 显示：块； 左：0； 右：0； 底部：0； 高度：.3rem； 背景#ff5f06； }

另一个选项是为元素设置透明边框，并使用鼠标悬停更改颜色

---

这是因为每个链接上都有

href

属性，它指向

#

，这将“意味着”返回页面顶部。为了避免这种情况，您可以使用

JavaScript

阻止默认行为，或者为每个

href

属性分配实际链接，或者为每个

href

属性分配一个

JavaScript

pseudo-protocol

例如：

href=“JavaScript:void（0）；”

这将防止跳转，但不建议使用。这是因为每个链接上都有

href

属性，它指向

#

，这将“意味着”返回页面顶部。为了避免这种情况，您可以使用

JavaScript

阻止默认行为，或者为每个

href

属性分配实际链接，或者为每个

href

属性分配一个

JavaScript

pseudo-protocol

例如：

href=“JavaScript:void（0）；”

这将防止跳跃，但不建议使用。