Javascript 具有自定义指针固定高度的导航栏

我创建了一个测试页面，其中一个菜单栏在悬停时有一个三角形指针。除了在菜单栏底部添加指针时，蓝色菜单栏会扩大其高度外，其余部分看起来都很好。我可以想出一种方法，使菜单栏具有固定的高度，并在媒体查询期间删除这种样式

有没有更好/更简单的方法来添加指针而不改变高度

（三角形应该接触菜单栏底部的边界，没有间隙。在解决高度问题后，我将对此进行调整）

短暂性脑缺血发作

截图： 代码：

.bg横幅{
背景图像：线性梯度（#17517f，#46769d）；
}
.bg头杆{
背景色：#005db9；
}
.bg横幅.导航链接{
颜色：白色！重要；
}
#菜单栏导航链接{
字体大小：16px；
右边填充：50px；
颜色：白色；
}
#菜单栏导航链接：焦点，
#菜单栏导航链接：悬停，
#菜单栏导航链接：已访问{
颜色：白色；
}
@介质（最小宽度：768px）{
导航栏导航栏导航李导航项激活：之后{
内容：“；
位置：相对位置；
左边距：-31px；
左：50%；
底部：15px；
左边框：6px实心透明；
右边框：6px实心透明；
边框底部：6px纯白；
}
}
@介质（最大宽度：767px）{
.下拉菜单>a{
显示：块！重要；
}
}
#菜单栏li.dropdown.show{
位置：静态；
}
#菜单栏li.dropdown.show.dropdown菜单{
显示：表格；
宽度：100%；
文本对齐：居中；
左：0；
右：0；
保证金：0；
}
.下拉菜单>a{
显示：表格单元格；
}
.下拉菜单>a{
字号：600；
}
















我的同僚们都是精英。Beatae，blanditiis eaque？在maxime的临时消费者中，是否有例外的驱避剂存在于铜酸盐的分子中？
$（“#menubar li.dropdown”）.hover（函数（）{
$（此）.addClass（“活动显示”）；
},
函数（）{
$（此）.removeClass（“活动显示”）；
});
$（“#菜单栏ul.下拉菜单>li>a”）。在（“单击”，函数（e）{
$（“#menubar li.dropdown”）.removeClass（“活动显示”）；
});

我看到您正试图为每个可悬停导航项添加一个三角形指针，我没有给您提供完美的解决方案，我只使用了您的css并添加了一些tweek来将伪“after”emel定位到其父项，作为相对的，而不是静态的

---

我的更改撤消了全宽活动导航下拉菜单，但这可能会让您进入正确的轨道我看到您正试图为每个可悬停导航项添加一个三角形指针，我没有给您提供完美的解决方案，我只使用了您的css并添加了一些tweek来将伪“after”emel作为相对项而不是静态项定位到其父项

---

我的更改撤消了全宽活动导航下拉菜单，但这可能会让您进入正确的轨道我喜欢@joshmoto的解决方案，因为它将子菜单直接对齐在菜单项下，但我认为如果您将

位置：static

应用于菜单1等列表项，则可以使子菜单全宽

如果您的子菜单是全宽的，那么您需要将子菜单向右放置以使内容对齐（并且需要根据菜单文本调整值）

$（“#menubar li.dropdown”）.hover（函数（）{
$（此）.addClass（“活动显示”）；
},
函数（）{
$（此）.removeClass（“活动显示”）；
});
$（“#菜单栏ul.下拉菜单>li>a”）。在（“单击”，函数（e）{
$（“#menubar li.dropdown”）.removeClass（“活动显示”）；
});

.bg横幅{
背景图像：线性梯度（#17517f，#46769d）；
}
.bg头杆{
背景色：#005db9；
}
.bg横幅.导航链接{
颜色：白色！重要；
}
#菜单栏导航链接{
字体大小：16px；
右边填充：50px；
颜色：白色；
}
#菜单栏导航链接：焦点，
#菜单栏导航链接：悬停，
#菜单栏导航链接：已访问{
颜色：白色；
}
@介质（最小宽度：768px）{
navbar先生{
高度：2.5雷姆；
}
导航栏导航栏导航李导航项激活：之后{
内容：“；
位置：相对位置；
显示：内联块；
左边距：-1.6875雷姆；
左：50%；
底部：1.1875雷姆；
左边框：0.375rem实心透明；
右边框：0.375rem实心透明；