定位下拉菜单项

Question

我对编码/ jQuery非常陌生，我只想弄清楚为什么我的下拉菜单没有正确定位。应该＆＃34;下拉＆＃34;的项目最终位于页面的左侧。这是我的页面：https://jsfiddle.net/apinck/sco9wx26/

我的CSS必须要做些什么，我猜？

div

Answer 1

您的对齐是由于position属性而在子菜单中的li元素上显示属性。

子菜单添加位置：绝对

.submenu {
    position:absolute;
    display: none;
    width: 150px;
    text-align: center;
    left:0;
    padding:0;
    margin:0;
}

创建子菜单

.submenu li {
    display:block;
    font-size:0.8em;
}

要将子菜单锚定到topmenu，您必须添加相对位置

.topmenu {
    list-style-type: none;
    padding: 10px;
    cursor: pointer;
    position:relative;
}

要看到有效的东西，请看小提琴：https://jsfiddle.net/sco9wx26/1/

编辑＆gt;＆gt;

我看到“留在页面上”。省略位置：相对;在您的topmenu上，子菜单将自己定位在页面的左侧。通过这样做，定位发生在具有position属性设置的第一个父级。

希望至少能帮助你解决定位问题。