Css 引导下拉菜单未在悬停时的单个项目下方

在引导导航栏中实现了下拉菜单后，由于某种原因，下划线动画不会在下拉菜单中的各个项目下划线-它只在最底部下划线。应该怎么做才能解决这个问题

.navbar>navbar品牌{
颜色：黑色；
}
.navbar默认值.navbar nav>li>a{
颜色：黑色；
}
.navbar默认值。navbar导航>li>a:活动，
.navbar默认值。navbar导航>li>a:焦点{
背景色：黑色；
颜色：白色；
}
.navbar默认ul li a：悬停{
颜色：#000；
}
.navbar默认ul li a:悬停：之前{
宽度：100%；
}
.导航栏默认ul li a:之前{
内容：''；
显示：块；
位置：绝对位置；
左：0；
底部：0；
高度：3倍；
宽度：0；
背景：#000；
-webkit过渡：宽度为0.25s；
-moz过渡：宽度为0.25s；
-ms过渡：宽度为0.25s；
-o型过渡：宽度为25s；
过渡：宽度为0.25s；
}
.navbar默认ul li.last>a:after，
#cssmenu ul li:最后一个孩子>a:之后{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.navbar默认ul li{
浮动：无；
宽度：100%；
}
.navbar默认ul li a{
宽度：100%；
线高：2米；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.导航栏默认ul li a：之后{
显示：无；
}
.导航栏默认ul li a:之前{
高度：1px；
背景：#000；
宽度：100%；
不透明度：.2；
}
.navbar默认ul li.last>a:之前，
.navbar默认ul li:最后一个子项>a:之前{
显示：无；
}
}
@媒体屏幕和屏幕（最小宽度：768px）{
#myNavbar ul:非（.下拉菜单）{
显示器：flex；
柔性包装：包装；
缩放：1；
}
#米纳瓦尔李酒店{
柔性生长：1；
}
#我的纳瓦尔李a酒店{
文本对齐：左对齐；
}
}

切换导航

此时动画绝对定位到

元素。因此，它仅在

元素的底部可见（

底部：0

）。您需要设置

位置：相对于
或

























这是因为您尚未指定位置：相对于下拉列表中的各个项目。尝试添加此CSS代码

.navbar-default ul li {
  position: relative;
}

很酷，但当我点击切换按钮时，菜单不会在较小的屏幕上打开。@MacaronLover-修复了折叠问题
.navbar-default ul li {
  position: relative;
}