我的 css 下拉菜单在 Internet Explorer 和 Firefox 上显示在错误的位置答案

【问题标题】：My css dropdown menu shows in the wrong place on internet explorer and firefox我的 css 下拉菜单在 Internet Explorer 和 Firefox 上显示在错误的位置
【发布时间】：2014-05-30 08:54:08
【问题描述】：

在 Chrome 和 Safari 上一切正常，但是当我尝试使用 IE 和 FF 检查它时，子菜单菜单显示在主导航的左侧。这是网站 cedumilam.php.cs.dixie.edu。这是我的 CSS 代码：

#nav {
    margin: auto;
    z-index: 10;
    display: inline;
    text-transform: uppercase;
    text-align: center;
}

#nav ul {
width:570;
margin:0px auto 2px auto;
text-align:center;}

#nav ul li{display: inline;
position:relative;
z-index:99;

}  

#nav li:hover { position: relative }
#nav li:hover > a { 
  color: #845343; 
  text-decoration:underline;
}

#nav li.sub:hover > a {
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;        
}

#nav li a {

  color: black;
  font-weight: bold;
  text-decoration: none;
  padding: 15px;
  display: inline;
}


#nav li ul { 
  background: #fff;
  margin-top: 5px;
  display: none;   
}

#nav li:hover ul {
  display:block; 
  position:absolute; 
}

#nav li ul {
  background: white;
  padding: 2px;      
}

#nav li ul li a, #nav li ul li a:hover {
  background: transparent;
  color: #000;
  width: 250px;
  font-size: 0.95em;
  font-weight: normal;
}

#nav li ul li a:hover { 
  color: #845343; 
  text-decoration: underline; 
}

【问题讨论】：

您的 HTML 无效。确保您的 HTML 始终有效，并且您在使用 CSS 时遇到的问题要少得多。 validator.w3.org/… 举个例子，你嵌套元素不正确，你缺少结束标签等。
以后请在您的问题/答案中发布代码。除非您可以保证您的链接网站在很长一段时间内保持完全相同并保持活力......
请提供小提琴。只需查看您的 css 位置：absolute;可能是问题

标签： jquery html css internet-explorer firefox

【解决方案1】：

要使其在 Firefox 中运行，请添加以下内容：

#nav li:hover ul {
    left: 0;
}

我认为 Firefox（可能还有 Internet Explorer）对 position: absolute; 的解释不同。

抱歉 -- 目前没有设置 Internet Explorer，所以我无法在那里进行测试...

这是一个小提琴：http://jsfiddle.net/Niffler/AQ39n/

【讨论】：