CSSのみでプルダウンメニューを作る

1 - yan さん

これはいける！
と、思ったのですが、IE7で動かないようなんですが？
IE6やFirefoxでは問題なく動きますけど...
なぜIE7だけ？？

2008年1月15日 22:35

2 - えど さん

>>yanさん
参考にしていただいたようでありがとうございます。

こちらで確認すると、IE7でも問題なく動いているのですが、
もしかしてスタンドアロン版のIE7などでテストされていませんか？
条件付コメントを使用しているので、スタンドアロン版の場合、
たまにその条件付コメントがうまく動かない場合があります。
もしスタンドアロン版を使用されている場合は、正規版で一度試してもらえますでしょうか？

そしてもし、正規版で試されている場合はそのIE7の細かいverなんかを教えてください。
こちらでできる範囲で確認したいと思います。

2008年1月16日 15:22

3 - yan さん

その後探求いたしましたら、原因がわかりました。
わけあって、ホ－ムページビルダーｖ8で開いたために、DOCTYPEが”HTML 4.01 Transitional”に書き換えられてしまったために起こった現象のようです。
”XHTML 1.0 Transitional”に戻すことで直りました。
お騒がせいたしましたm(＿ ＿)m

2008年2月 1日 10:42

4 - えど さん

>>yanさん
原因がわかって、直ったようで安心しました。
確かに、ホームページビルダーは勝手に変更してしまうっていうのがあった気がします。
せめて確認くらいはほしいですよね・・。

ご意見ありがとうございました！

2008年2月 1日 11:37

5 - ユウ さん

はじめまして。
こちらのプルダウンはよさそう！と思い、設置をしていたのですが、CSSに関しては初心者の域をでないもので、どうしても横メニューにカスタマイズする方法がわかりません。
方法を教えていただけるとありがたいです。

2008年2月29日 11:04

6 - えど さん

>>ユウさん
コメントありがとうございます！
横メニューですね。確かに横のほうが重要ありそうですね・・。
ちょっと新しく作成したいと思うので、完成したらアップ致します(*'')

2008年2月29日 18:01

7 - えど さん

>>ユウさん
縦のプルダウンメニューサンプルを作ってみました。
メニューの隙間は、ページ内に書かれている.menu ul li { ... }の中のmargin-rightの値を変更することで調整が可能です。

2008年3月 3日 10:04

8 - ユウ さん

遅くなりましたが、ありがとうございます！！
今後使用させていただきたいとおもいます。
感謝です！

2008年3月10日 04:17

9 - はるみ さん

はじめまして。
このCSSだけでプルダウンメニューを作る妙技、以前に他でも見たことがあってずっと探していたのですが見つからず、助かりました！ありがとうございます。
ところでこの妙技とは直接関係ないのですが、プルダウンメニューのレイヤー構造がIE6、7で崩れているのがleftの位置を80pxより小さくするとわかります。「Photo」の下に潜ってしまっています。それからIE7では「Blog」と「Photo」間のマージンが他より余計に取られています。（margin-bottomを0にしてみて下さい）
このpositionセレクタ系のIEのバグ？（z-indexも無視？marginの解釈もおかしい？）と思われる現象は、javascriptを使ったポップアップメニューでも現れ、困っています。何か解決法をご存知ないでしょうか？プルダウンメニューを横並びにすればバレないのですが、重ねて使いたいシーンもあるので・・・。よろしくお願いします。

2008年5月16日 17:29

10 - えど さん

>>9 - はるみさん
コメントありがとうございます。
なるほど、微妙に崩れていましたか・・。
ちょっと時間があるときに調査してみます。
ご指摘ありがとうございました～！

2008年5月16日 18:07