将鼠标悬停在导航栏下拉菜单问题上

Question

我创建了一个navbar ，当button悬停在其上时会显示一个下拉菜单。 这是代码笔： https://codepen.io/sahxil/pen/qBoVgXg

我的导航栏有四个问题。 如果您在Solutions中查看 codepen 和 hover ：

1. 您可以看到导航栏被移位，即其他按钮向底部移动。
2. 当 cursor 不再悬停在导航按钮上时，正常的下拉菜单（由mouseover触发）应该折叠，对吗？ 但它不会崩溃。 它仅在第二次悬停时折叠。（请参阅代码笔以获得更清晰的信息）。
3. 当悬停在导航按钮上时，它们正下方有一个红色下划线，宽度为 30%，但是，随着按钮的下拉，下划线会移位（正如您在 hover 上的Solutions时看到的那样。

除此之外，另一个问题是带有下拉菜单的button即使没有悬停在navbar栏中也会占用更多宽度。

我该如何解决？

Answer 1

1. 使用#navbar {align-items: flex-start}告诉 flexbox 正确对齐您的项目： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2. 使用mouseout作为鼠标悬停的伴侣。 像鼠标悬停一样，它也适用于子元素。 https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event

3. 设置position: relative在父元素（ div.select-btn ）​​上。 发生这种情况的原因是您的父元素定位为static 。 看到这个解释为什么这很重要： https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_lining_block

4. 我假设“按钮”是指锚元素？ 我在您的代码中看不到任何实际的按钮元素。 如果您发现间距太宽，请尝试在section#header和/或ul#navbar上调整justify-content