Javascript 如何在响应菜单的导航链接上悬停时设置下划线？

我已经为导航菜单上的鼠标悬停下划线编写了代码，效果很好。但当我创建一个响应导航菜单时，鼠标悬停上的下划线覆盖了块的整个宽度，而不是导航链接，就像浏览器大于600px时一样

，也可以参考下面的代码段

感谢您的帮助

函数myFunction（）{
var x=document.getElementById（“myNavbar”）；
如果（x.className==“导航栏”）{
x、 类名+=“响应”；
}否则{
x、 className=“navbar”；
}
}

@font-face{
字体系列：“里昂”；
src:url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src:url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf）格式（“woff”），url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf）格式（“opentype”），url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf）格式（“svg”）；
}
身体{
填充：0；
保证金：0；
背景：白色；
}
* {
框大小：边框框；
}
h1{
字体系列：“里昂”；
字体大小：24px；
最大宽度：800px；
文本对齐：居中；
保证金：自动；
填充顶部：16px；
左侧填充：16px；
右边填充：16px；
}
navbar先生{
z指数：1；
字体系列：“里昂”；
背景色：白色；
位置：固定；
底部：0；
宽度：100%；
边框顶部：.05rem实心；
显示器：flex；
证明内容：之间的空间；
填充：14px 16px；
}
纳瓦尔先生{
颜色：黑色；
字体系列：“里昂”；
字体大小：24px；
文本对齐：居中；
文字装饰：无；
位置：相对位置；
}
.导航栏a:悬停{
颜色：黑色；
字体系列：“里昂”；
文字装饰：无；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：0；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
.navbar a:悬停：在{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
.导航栏a.激活{
背景色：白色；
颜色：黑色；
字体样式：无；
字体系列：“里昂”；
}
.navbar.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
纳瓦尔先生{
显示：无；
填充顶部：6px；
}
.导航栏a.图标{
浮动：对；
显示：块；
}
.navbar.responsive.icon{
位置：绝对位置；
左：10px；
顶部：8px；
}
.导航栏{
浮动
没有一个
显示：块；
文本对齐：居中；
}
.导航栏{
显示：块；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：0；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
.navbar.a:悬停：在{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
}
p{
利润率：10px0；
}

---

我正在检查您的CSS，问题是

标记具有扩展标记的
display:block
属性，因此样式应用于标记本身，文本中没有，因此，如果您想在显示较小时保留空间，您应该将每个
a
标记包装在列表项或
div
中，并将
display:block的属性传递给它

这就是我所说的例子


函数myFunction（）{
var x=document.getElementById（“myNavbar”）；
如果（x.className==“导航栏”）{
x、 类名+=“响应”；
}否则{
x、 className=“navbar”；
}
}
@font-face{
字体系列：“里昂”；
src:url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src:url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf）格式（“woff”），url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf）格式（“opentype”），url（“http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf）格式（“svg”）；
}
身体{
填充：0；
保证金：0；
背景：白色；
}
* {
框大小：边框框；
}
h1{
字体系列：“里昂”；
字体大小：24px；
最大宽度：800px；
文本对齐：居中；
保证金：自动；
填充顶部：16px；
左侧填充：16px；
右边填充：16px；
}
navbar先生{
z指数：1；
字体系列：“里昂”；
背景色：白色；
位置：固定；
底部：0；
宽度：100%；
边框顶部：.05rem实心；
显示器：flex；
证明内容：之间的空间；
填充：14px 16px；
保证金：0；
}
纳瓦尔先生{
颜色：黑色；
字体系列：“里昂”；
字体大小：24px；
文本对齐：居中；
文字装饰：无；
位置：相对位置；
}
.导航栏a:悬停{
颜色：黑色；
字体系列：“里昂”；
文字装饰：无；
}
李国宝先生{
列表样式：无；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：0；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
.navbar a:悬停：在{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
.导航栏a.激活{
背景色：白色；
颜色：黑色；
字体样式：无；
字体系列：“里昂”；
}
.navbar.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
纳瓦尔先生{
显示：无；
填充顶部：6px；
}
.navbar.icon{
浮动：对；
显示：块；
}
.navbar.responsive.icon{
位置：绝对位置；
左：10px；
顶部：8px；
}
.纳瓦尔{
浮动
没有一个
显示：内联；
文本对齐：百分位