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;
}

Answer 2

将规则#nav_1348933 li:hover > ul更新为以下内容：

#nav_1348933 li:hover > ul{
  display:block;
  z-index: 100;
  position: absolute;
  top: 42px;
  left: 0;
}

另外，使用主链接更改子UL的顺序。

示例：

<li id="about">
  <ul id="navsub_1348933_1008341">
  //SUBMENU ITEMS HERE
  </ul>
  <a href="/about/about.htm">About</a>
</li>

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

2 个答案: