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

Question

实际上，我正在观看 Lynda.com 上有关使用下划线从头开始构建 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%);
}

突然，下拉菜单没有响应。

我认为我将问题确定为“显示:无；”但是把它去掉只会造成一团糟。我试过像这样添加背景颜色:

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

但它最终看起来像这样:

显然，我希望这个下拉菜单位于链接下方，而不是前面。谁能告诉我如何解决这个问题？

编辑:我感谢到目前为止尝试回答但两个答案都不正确的人。感谢 David，我将我的代码放入 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;
}