我在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。

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