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 に答える