我在 html 下拉菜单上的选项卡

Question

我一直在为学校创建一个网站，它包含一个可悬停的下拉菜单。

问题是当我将鼠标悬停在菜单上时，下拉项目与下拉选项卡不对齐

这是一张图片给你看

Answer 1

看来您的问题主要在于框定位。使用absolute 定位时，您必须始终指定您的内容位置。这将避免让您的子菜单飞来飞去，而不是准确地出现在您想要的位置。此外，请确保父元素具有relative 位置，以便您的子菜单可以继承它的框属性。

.firstlevel-menu-item {
    position: relative;
}
.my-submenu {
    position: absolute;
    top: 100%;             /* 100% of firstlevel menu's height */
    left: 0;               /* align to firstlevel menu's left side */
    width: 100%;           /* width of firstlevel menu */
}

将内容与父框的末尾对齐应该可以解决您的问题。

enlightenment 有一个 JSFiddle。

我建议您搜索更多有关框定位的信息，因为它对于构建下拉菜单和依赖绝对/相对定位的各种其他功能至关重要。