CSS 子菜单定位在 Chrome 和 Safari 中有效，但在 IE 和 Firefox 中无效答案

【问题标题】：CSS Sub-menu positioning works in Chrome & Safari, but not IE and FirefoxCSS 子菜单定位在 Chrome 和 Safari 中有效，但在 IE 和 Firefox 中无效
【发布时间】：2013-04-02 01:45:18
【问题描述】：

我目前正在为游戏社区建立一个网站，名为http://www.quad-gaming.com/。

除了导航栏右侧“登录”下的下拉菜单外，一切运行顺利。它在 Chrome 和 Safari 中运行良好，但在 IE 和 Firefox 中，它浮动到左侧。

我做错了什么？

【问题讨论】：

请不要在指向网站的地方提出问题。网站发生了变化，但这个 stackoverflow 问题仍然存在。有人会想登陆一个他们看不到问题来源的页面吗？或者更糟糕的是：来源变了？它降低了stackoverflow的价值。编辑问题添加上面的相关代码，并提出关于CODE的问题，而不是引导观众“去看看网站”。

标签： html css menu navigation submenu

【解决方案1】：

我用过

nav ul li ul {
    position:absolute;
    left:0px; /* Adding this to fix left position*/
    visibility: hidden;
}

它适用于 Firefox。

【讨论】：

这解决了我的问题，但上面的答案更具体，所以我将其标记为已回答。有没有办法将您也添加到“已接受的答案”中？
您可以将我的答案标记为有用...主要的想法是您已经解决了问题。

【解决方案2】：

确实有点奇怪。

如果您将ul 元素指定为将left 的值设为零，则可以正常工作：

nav ul li ul {
  left: 0;
}

无法在 IE 上试用，因为我在 Mac 上。希望它也能在那里工作。

【讨论】：

再深入一点，我认为这正在发生，因为li 元素是一个内联元素，如果将其更改为浮动元素或内联块元素，它可以在没有添加left 值。我认为这种方式是一种更好的方式——即使你需要重新设计你的菜单——以避免进一步的冲突。
添加“左：0；”解决了我的问题，非常感谢。这是我添加它的地方：nav ul li ul { position: absolute;左：0px；可见性：隐藏； }

【解决方案3】：

试试这个

.dropdown ul {
    left: 0;
}

在 IE10、IE8、FF20 和 Chrome 26 上测试并在 Win7 上运行

【讨论】：