0

CSS3 マルチレベル ドロップダウン メニューを作成したいと思っています。インターネットでいくつかの例を見つけました。

これを使用することにしたのは、アニメーションが優れているためです (残念ながら、実際のユースケースではうまく機能しません): http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-DropdownMenu/index .html

私の質問:

  1. 2 番目のレベルの z-index の問題を修正することはできません (最初のドロップダウン リストの TOP でアニメーションが開始され、その下にあるはずです)。誰かが私を正しい方向に向けることができますか?
  2. より優れた CSS3 のみのドロップダウン メニューはありますか? 任意の数のレベルで動作し、すべての解像度で適切に動作するものを探しています。
4

2 に答える 2

1

z-index は見た目よりも複雑です。要素は異なる「スタック コンテキスト」にある場合があります。つまり、それらの z-index は直接相互作用しません。共通の祖先に到達するまで、2 つの競合する要素を DOM 階層をたどります。そこで z-index の割り当てを開始し、元に戻ります。

スタック コンテキストに関する記事は次のとおりです: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

以下の例では、#content-wrapper が #nav ul li と重なった場合、#header と #content で z-index の設定を開始します。他の CSS とマークアップによっては、機能する前に #nav と #content-wrapper に進む必要がある場合があります。

<div id="page">
  <div id="header">
    <div id="nav"><ul><li>etc</li></ul>
  </div>
  <div id="content">
    <div id="content-wrapper">
      Blah
    </div>
  </div>
</div>
于 2012-10-28T02:53:16.067 に答える
1

z-index プロパティは、要素のスタック順序を指定します。スタック順序が大きい要素は、常にスタック順序が小さい要素の前にあります。

低い方から高い方へ順に Z インデックスを指定してみてください。ページ上の他の要素にまだ z-index が定義されていないことを確認してください。

それでもうまくいかない場合は、ページ/コードを確認したいと思います。

于 2012-10-27T20:45:43.317 に答える