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)也被设置为一个位置。我会使用相对的，因为它(希望)不会破坏其他位置：

#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;
}

绝对元素将根据位置显式设置的最近的父元素来定位自己。