html - CSS 样式在 FF 和 IE 中正确定位，但在 Chrome 中不正确

Question

我正在尝试让我的下拉导航正确显示。它适用于 FF 和较新版本的 IE，但不适用于 Chrome。我认为这可能与我的父列表项具有唯一 ID 以及出于某种原因我在 CSS 中使用的选择器没有正确定位父 li 下的子 ul 有关。有人可以看看我的 Chrome 代码，看看他们是否发现任何问题吗？谢谢。

CSS:

#nav_1348933 li#about:hover > ul{
  position:absolute;
  top:6.9em;
  left:0;
  z-index: 100;
  margin:0;
  padding-bottom:1em;   
}

#nav_1348933 li#admissions:hover > ul{
  position:absolute;
  right: 7em;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#academics:hover > ul{
  position:absolute;
  right: 0.25em;
  width: 480px;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#financial-aid:hover > ul{
  position:absolute;
  right: 15.75em;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#resources:hover > ul{
  position:absolute;
  right: 8.25em;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 li#donate:hover > ul{
  position:absolute;
  right:0;
  top:6.9em;
  z-index: 100;
  padding-bottom:1em;       
}

#nav_1348933 ul{
  position:relative;
  display:none;
  margin:0;
  width:31em;   
  list-style:none;
  background: url(/_images/Layout/hover-tab-body.png) repeat-y;
  z-index: 100;
  padding:0.5em 0.5em 0 0.5em;  
}

网站链接:

http://lltc.designangler.com

Answer 1

让您的菜单正常工作有很大帮助的是使 LI 直接位于菜单显示下方:inline-block;。这样，菜单项就有了实际的尺寸，子 ul 可以定位到这些尺寸。

#nav_1348933 > li {
    display: inline-block;
}