为什么我的Wordpress菜单不能正常工作？

Question

我实际上正在关注Lynda.com关于使用Underscores从头开始构建Wordpress网站的视频。

我们正在设计style.css中的下拉菜单。

默认代码看起来像这样并且工作正常：

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

但是，由于我们需要更改外观，他指示我们将其更改为此代码，而不是：

.main-navigation ul ul {
    position: absolute;
    left: 0;
    z-index: 99999;
    display: none;
    float: left;
    padding: 0;
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

突然间，下拉列表没有响应。

我想我将问题指向“display：none;”但拿出来只会导致一团糟。我试着添加像这样的背景颜色：

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

但最终看起来像这样：

显然，我希望将此下拉到链接下方，而不是在前面。谁能告诉我如何解决这个问题？

编辑：我很感谢到目前为止尝试回答的人，但答案都不正确。感谢大卫，我将我的代码放入jsfiddle.net：http://jsfiddle.net/DMDesigns/5g9kbf9s/2/

如果你们中的一个人能够解决这个问题，请告诉我！谢谢！

Answer 1

left: -999em;和display: none;内容正在消失

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #4d4d4d;
    float: left;
    position: fixed;
    top: 1.5em;
    left: 1.5em;
    z-index: 99999;
}

Answer 2

使用原始代码中使用的左侧位置值：

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: 0;
z-index: 99999;

}

而不是：

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}

Answer 3

我仍然不确定为什么他的代码会破坏网站，但我确实解决了我遇到的问题。我想我应该发布它，以防万一其他人有类似的问题。

我按原样保留了代码，但添加了背景颜色并更改了＃34; top＆＃34;从1.5em到3em，使其正确加载。

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 3.0em;
left: -999em;
z-index: 99999;
background: #9adcfd;

}

感谢所有尝试过的人！