CSS下拉菜单定位错误答案

【问题标题】：CSS dropdown menu positioning errorCSS下拉菜单定位错误
【发布时间】：2014-08-13 22:50:20
【问题描述】：

我似乎无法追踪这个错误的来源。 http://wwva.org 是我为其构建布局的站点。 CSS 下拉菜单建立在 ul/li 结构上，当用户悬停/点击主链接时会出现子菜单。一切似乎在 Chrome 中运行良好，但 Firefox 和 IE 无法将子菜单定位在主菜单链接下方（FF 悬停时跳转，IE 从一开始就错位了）。

主站：http://www.wwva.org CSS：http://wwva.org/wp-content/themes/wwva/style.css

我意识到这是一个具体案例，而不是一个原则问题。任何帮助将不胜感激！

【问题讨论】：

这样 Firefox 跳转的东西看起来棒极了！显然，以一种非常出人意料的 UI 方式，但非常有趣 :)
您应该尝试在小提琴中重新创建它和/或向我们展示您的代码。 StackOverflow 对“这是我的网站”问题皱眉
是的，对不起。我真的只是没有发布它。因为 CSS 是多个媒体查询块的合并，并且菜单是通过 Wordpress 动态生成的，所以我认为重新创建可能会很痛苦。感谢您对我的幽默，并善意地提出修改建议！

标签： html css layout menu hover

【解决方案1】：

尝试改变

.menu ul li {
    display: inline;
}

到

.menu ul li {
    display: inline-block;
}

在你拥有它的各个地方。

【讨论】：

谢谢！这似乎已经解决了。我通常避免使用 inline-block，因为 CSS 在堆叠元素时会出现空格问题。有见地！
是的，我真的很喜欢 inline-block。无论如何，内联列表项使其在浏览器实际大小方面有点不可靠。在某些浏览器中，它一定在 li 和 sub ul 之间留下了微小的差距。
这个答案派上用场了，即使在使用了我朋友建议的 left:0; 技巧之后。事实证明，这在跨浏览器上的表现要好得多。

【解决方案2】：

一位朋友刚刚建议将left: 0; 添加到.sub-menu 中，这似乎已经解决了它。

【讨论】：