设置可点击的下拉菜单

Question

我正在使用移动优先方法来创建响应式网站。我目前正在使用我的导航菜单，我对它在移动设备上很满意（尽管它远非完美）。但是，在为我的导航菜单设置样式以供Web使用时，我无法将我的下拉内容放在菜单中的元素下面。它目前正在左上角突然出现。

我正在使用jQuery来创建我的可点击菜单（不知道这是否相关）。

我也遇到了移动设备上的错误，我再次打开它后无法关闭下拉菜单。如果有人也有答案，那就太好了，但我现在对它很满意。

非常感谢任何帮助，谢谢：）

Answer 1

不是一个完美的例子，但你最好不要使用浮动和替换显示器方法。

这些方面的东西：

@media only screen and (min-width: 900px) {
    nav > a, .dropNav, nav > div {
        display: inline;
        position: relative;
    }

    .dropList {
        left: 0;
        right: 0;
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        padding-left: 0;
    }
}

示例：https://jsfiddle.net/davcpas123/mjukghz6/1/

这将实现与此类似的功能：