純粋な CSS ポップアップ メニュー作成の原理と実装 By shawl.qiu_Experience 交換

純粋な CSS ポップアップ メニュー作成の原理と実装 By shawl.qiu

要約:
この記事では、CSS を使用して Opera に適した複数スタイルのポップアップ メニューを作成する方法を紹介します。 Firefox および IE
## #説明:
CSS ポップアップ メニューを記述する重要なポイントは、マウスがターゲット上に移動したときに非表示のラベルを表示することです。
非表示にするラベルは非表示です。 display:none; 属性を使用します。
トリガー表示非表示タグは主に :hover 属性を使用し、非表示タグを表示するには display:block; を使用します。

ただし、ブラウザーが CSS を一貫してサポートしていないためです。## #Opera または Firefox の場合、純粋な CSS メニューを作成できます。これらは、任意のタグの :hover 属性をサポートします。
IE ブラウザの場合、:hover は a タグでのみ機能しますが、スクリプトの onmouseover、onmouseout を使用して、他のタグの :hover 属性をシミュレートします。
したがって、IE に適した CSS ポップアップ メニューを作成するには、いくつかのスクリプトを使用する必要があります。

ディレクトリ:
1. CSS ポップアップの作成縦列の右側のメニュー
1.1 Opera、Firefox の純粋な CSS ポップアップ メニューに基づいています
1.2 IE、Opera、Firefox と互換性のある CSS ポップアップ メニュー (スクリプト実装)
# ##2. 水平下部ポップアップ CSS メニューを作成する
2.1 Opera、Firefox メニューに基づいた実際の純粋な CSS ポップアップ
2.2 IE、Opera、Firefox と互換性のある CSS ポップアップ メニュー (スクリプト実装)

3. 結論

4. プレビュー

shawl.qiu
2006 -10-01

http://blog.csdn.net /btbtd

1. 垂直行の右側にポップアップする CSS メニューを作成します。
1.1 True Based Opera、Firefox の純粋な CSS ポップアップ メニュー


行番号

" http://www.w3.org/TR/html4/loose.dtd
1. ">
10. level
12. level_ title
13. level_ title 1
14. level_ title 2
15. level_ title 3
16. level_ title 4
17. level_ title 5

level 1

level_ title

level_ title 1

level_ title 2

level_ title 3

level_ title 4

level_ title 5