0

我试图让我的下拉导航正确显示。它在 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

4

2 回答 2

1

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

#nav_1348933 > li {
    display: inline-block;
}
于 2013-11-11T16:30:56.803 回答
0

将规则更新#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>
于 2013-11-11T16:08:04.397 回答