html - CSS WordPress 菜单

Question

我的 Wordpress CSS 菜单似乎有问题。我正在尝试在菜单中创建一个下拉元素，它被方便地包装在一个自动称为“子菜单”的 div 中。

正常时，菜单如下所示:

但是，当我尝试访问“摄影”下的下拉菜单时，会发生这种情况:

我已经尝试了所有方法，但无法让它在摄影下正确显示。任何帮助将不胜感激:

#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}

#header li:hover ul.sub-menu {
display:block;
}

Answer 1

您需要确保容器元素 (#header li) 也设置到一个位置。我会使用 relative 因为它(希望)不会破坏其他定位:

#header li {
position: relative;
}

#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}

header li:hover ul.sub-menu {
display:block;
}

绝对元素将根据位置已明确设置的最近父元素定位自己。