0

サイト: http://bit.ly/Pa3xJS

IE (9 以下) を使用して、ホームページの任意のメニューにカーソルを合わせて 2 つ以上の項目を選択しようとすると、つまり、[ショップ] にカーソルを合わせて [ブラシ] または [ヘアケア] をクリックしてみると、メニューが消えます。

これは私のスライドコンテンツが原因であると思われますが、私が試したすべて (CSS ハックと JS の変更) ではメニューが正常に機能せず、FF、Chrome、および Safari で機能します。

これに対する特定の IE 修正または私が見逃した CSS ハックはありますか?

編集: Justus の CSS フィドルを更新して、無関係なコードのビットなしでスライド コンテンツを含めるようにしました - http://jsfiddle.net/eN7sh/14/。IE で何が問題なのかを探して、自由に遊んでください。主に IE9 です。

4

2 に答える 2

1

Web サイトには他にも多くのコードが含まれているため、実際に何が問題を引き起こしているのかを特定するのは困難です。少し前にCSSのみの3レベルメニューをいじりました：http://jsfiddle.net/eN7sh/12/

css/htmlを一致させることができれば動作すると確信していますがli:hover、IE7 では動作しない可能性があります。必要に応じて、javascript を使用してhoverイベントにクラス名を追加し、それを操作することができます。フィドルコード: HTML:

<ul class="main">
  <li ><a href="#">Link one</a></li>
  <li><a href="#">Link two</a>
    <ul>
      <li><a href="#">Sublink one</a></li>
      <li><a href="#">sublink two</a>
        <ul>
          <li><a href="#">Sub sublink one</a></li>
          <li><a href="#">Sub sublink two</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS:

ul.main {
}
.main li {
    float: left;
    position: relative;
}
.main ul {
    position: absolute;
    display: none;
    left: 0;
    top: 1em;
}
.main li:hover > ul {
    display: block;
}
.main ul li {
    display: block;
    float: none;
    white-space:nowrap;
}
.main ul ul {
    left:100%;
    top: 0;
​}​
于 2012-10-03T11:11:07.743 に答える
0

私はあなたのサイトをIE 8.でチェックしました.その動作は正常です..

あなたがすべきことはただ一つ

申し込み

サブメニュー項目の z-index プロパティ。

于 2012-10-03T11:39:32.717 に答える