[使える CSS テクニック] CSSで実現するプルダウンメニュー

06月 2008年

[使える CSS テクニック] CSSで実現するプルダウンメニュー

sakai 15:59 PM

使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。

確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。
CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。

まずは、以下のサンプルをご覧ください。

このサンプルの HTML は以下のようになっています。


<ul id="pulldown-menu">

<li><a href="#">シーブレイン</a>
    <ul>
    <li><a href="http://c-brains.jp/">コーポレート</a></li>
    <li><a href="http://c-brains.jp/web-site/">WEBサイト制作</a></li>
    <li><a href="http://c-brains.jp/document/">マニュアル制作</a></li>
    <li><a href="http://c-brains.jp/localization/">ローカライズ</a></li>
    </ul>
</li>

<li><a href="#">検索エンジン</a>
    <ul>
    <li><a href="http://www.yahoo.co.jp">Yahoo! Japan</a></li>
    <li><a href="http://www.google.co.jp">Google</a></li>
    <li><a href="http://www.goo.ne.jp">Goo</a></li>
    <li><a href="http://www.excite.co.jp/">excite</a></li>
    <li><a href="http://www.biglobe.ne.jp">Biglobe</a></li>
    </ul>
</li>

<li><a href="#">週刊少年漫画</a>
    <ul>
    <li><a href="http://jump.shueisha.co.jp/">少年ジャンプ</a></li>
    <li><a href="http://www.shonenmagazine.com/">少年マガジン</a></li>
    <li><a href="http://www.websunday.net/">少年サンデー</a></li>
    </ul>
</li>

</ul>

非常にシンプルな HTML です。

CSS は以下です。


ul#pulldown-menu a {
        color: #FFFFFF;
        text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
        background: #3366FF;
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
        background: #FF9933;
}

ul#pulldown-menu li {
        float: left;
        position: relative;
        margin: 0 0.5em;
        width: 9em;
        height: 2em;
        font-weight: bold;
        line-height: 2em;
}
ul#pulldown-menu li a {
        display: block;
        width: 9em;
        height: 2em;
        text-align: center;
}

/* 下層のメニューを不可視に */
ul#pulldown-menu li ul {
        display: none;
}

/* 疑似要素 :hover で下層のメニューを可視に */
ul#pulldown-menu li:hover ul {
        display: block;
        position: absolute;
        z-index: 100;
}

ul#pulldown-menu li ul li {
        float: none;
        margin: 0;
        font-weight: normal;
}

通常状態では 2 階層目の ul を display: none; で不可視（ボックス非生成）にしています。
疑似クラスの :hover を 1 階層目の li に指定して、マウスオーバーすると下層の ul が可視（ボックス生成）されるようになっています。

ただし、この方法には問題があります。
IE6 では a 要素以外の疑似クラスが適用されないため、そのままでは IE6 でプルダウンが表示されません。

そこで、IE6 対策で以下のコンポーネントを使用しています。

whatever:hover

IE 独自の behavior プロパティを使って、IE6 でも DHTML でプルダウンを実現します。

上記のサイトから「csshover.htc」をダウンロード
サーバの任意の場所にダウンロードした htc ファイルを置く
CSS に behavior プロパティを追加して、置いた htc ファイルまでのパスを既述（HTML からのパスになるので注意）


ul#pulldown-menu { /* IE6 対策 */
        behavior: url("csshover.htc");
}

ちょっとズルをしましたが、これでほとんどのモダンブラウザに対応したプルダウンメニューを作ることができます。

使えるCSSテクニック Vol.01

トラックバック

このエントリーのトラックバックURL: http://c-brains.jp/cgi-bin/mt/###/1566
###はmt-tb.cgiに変更してください。

木下茂雄のブログ

ほぼCSSのみで作る縦型プルダウンメニュー: 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHT...

トラックバック時刻: 2009年05月26日 19:49

とても参考になります。
実際に全く同様のhtmlとcssファイルを作成してブラウザで見てみると
トップメニューとプルダウンで表示されるメニューが、この例のように真っすぐ
縦に直線にならばず、プルダウン部分が右にずれます。
また、各メニュー文字の頭に黒丸とか白抜き○が付きます。
どこが違うのでしょう。
MacOSX　でブラウザは、Safari またはFirefoxです。
アドバイス頂ければうれしいです。

松本隆志 | 2008年10月18日 00:30

＞松本さん
コメントありがとうございます。
ご指摘いただいて気がついたのですが、上記のサンプルはブラウザのデフォルトのスタイルをリセットしている前提のものでした。
実際には

* {
margin: 0;
padding: 0;
list-style: none;
}

を CSS に追加していただくと、サンプル同様の表示なるかと思います。失礼いたしました。
今後ともどうぞよろしくお願いいたします。

sakai | 2008年10月18日 04:03

初めまして栗巣と申します。シンプルな記述のプルダウンメニューで大変気に入りました。ただ、どうしてもメニューをセンターに表示させたく、表の中にメニューを入れてみたのですが、IE６だと一番左側のメニューしかプルダウンされずIE7だとプルダウンされたメニューが右側に半分ずれて表示されてしまいます。Fire fox、Safari は問題ございません。またOSはwindows xpになります。お手数お掛けしますが、上記URLをみていただければ状況はわかると思いますので、ご指導いただけますとありがたいです。宜しくお願い申し上げます。

栗巣 | 2008年10月26日 13:51

＞栗巣さん
はじめまして、コメントありがとうございます。
ご指摘いただいた件、サンプルページを拝見させていただき検証してみました。

＜IE6 での表示不具合＞
栗巣さんのサンプルでは、親の ul を分割していますので、値が「pulldown-menu」の属性を id ではなく class に変更する必要があるようです。class に変更すると問題なく動作しました。

＜IE７での表示不具合＞
こちらはちょっと原因がわかりませんでした。うーん、IE7 でしか起こらない現象のようですね… 右に 50% ズレてしまっているようです。なんででしょう。

原因はもう少し検証してみますが、とりあえずは CSS に以下のコードを加えれば回避できます。（IE7 用ハック）

*+html ul.pulldown-menu li ul {
margin-left: -50%;
}

以上、ご参考ください。
今後ともどうぞよろしくお願いいたします。

sakai | 2008年10月27日 22:04

sakai様

ご指導いただき誠にありがとうございます。おかげさまで大変良い物ができました。以前から上記サンプルとは別物で、かなりの時間を費やし、諦めていた所だったので完成した際は本当に感動しました。また、貴サイトに寄らせていただきますので今後とも宜しくお願い致します。

栗巣 | 2008年10月28日 12:33

sakai様

はじめまして。
私も栗巣さんと同じ現象で、*+html ul.pulldown-menu li ul {
margin-left: -50%;
}
をCSSの一番最後に追加したのですがうまくいきません。
これはどこに追加したらよいのでしょうか？お教えいただければ幸いです。

はやま | 2008年10月29日 12:00

＞はやまさん
はじめまして、コメントありがとうございます。

ご指摘のコードは CSS の一番最後で問題がないはずです。
上手くいかない原因としては、親の ul の属性が id のままになっている、ことかもしれません。
その場合、ul class="pulldown-menu" に変更していただければ大丈夫なはずです。

もし、上記が原因でないのであれば、お手数ですがもう一度現象をコメントで詳しく伺えますでしょうか。
どうぞよろしくお願いいたします。

sakai | 2008年10月29日 12:23

sakaiさん

ありがとうございます。
お教えいただいた方法試してみます。

ありがとうございます。
また寄らせていただきます。

はやま | 2008年10月29日 20:41

sakai様

はじめまして、各テクニック非常にありがたく読ませていただいております。
今回のプルダウンメニューの作り方をオリジナルの内容で試してみたのですが、Firefoxでは問題なく動作しますがどうやらIE対策が上記の方法でうまくいきません。

csshover.htcをダウンロードし、css内にそのファイルまでのパスを記述するところまでは同じように行なったのですが、親ボタンをポイントしても子メニューが表示されませんでした。
そこで、内容を変える時にどこかでミスをしたのかと思い、このサイトのサンプルからそのまま三つのメニューをコピーして入れてみたのですが、このページでの動作と同様には動作せず、子メニューは表示されませんでした。

まだ何か記述が必要なコードがあるのでしょうか？

お忙しいところ恐縮ですが、ご教授いただければ幸いです。

寺田 | 2008年11月10日 13:56

＞寺田さん
はじめまして、コメントありがとうございます。

ご指摘の件、推測です↓

ul#pulldown-menu { /* IE6 対策 */
behavior: url("csshover.htc");
}

ややこしいのですが、csshover.htc へのパスは「HTML」からの相対パスになります。
ここが、「CSS」からの相対パスになっている可能性が考えられます。

サーバにアップして確認できる環境でしたらば、絶対パスにして試してみてください。
どうぞよろしくお願いいたします。

sakai | 2008年11月10日 20:10

はじめまして。
大変参考にさせていただいております。

メニューなのですが、上記の方と同じくcsshover.htcをダウンロードし、css内にそのファイルまでのパスを記述するところまでは同じように行なったのですが、親ボタンをポイントしても子メニューが表示されませんでした。

相対アドレス、絶対アドレス両方入れたのですが同じ結果でした。

アドバイスいただけましたら幸いです。

ユウ | 2008年11月14日 19:01

＞ユウさん
はじめまして、コメントありがとうございます。

ローカルでテストしてみたところ、どうも csshover.htc までのパスの記述のあたりが怪しい気がしました。
パスが絶対パスだと上手く動かない場合があるようです。
ドキュメントルート相対パスの場合は HTML からのパスを既述しなくてはいけなくてややこしいので、サイトルート相対パス（/から始まるパス）で記述するのが良いかもしれません。

そのあたりでちょっと試してみていただけますか？

それでも上手くいかない場合は、もう一度検証させてください！
よろしくお願いいたします。

sakai | 2008年11月14日 19:45

sakai様

返信ありがとうございました。

パスの件、いろいろ試したのですがやはりうまく表示されません。

なんとか可動させたいのでなんとか宜しくお願いします＞＜

ユウ | 2008年11月17日 16:19

＞ユウさん
再びコメントありがとうございます。

ul#pulldown-menu { /* IE6 対策 */
behavior: url("/gold/carocaro/csshover.htc");
}
でもダメですか？

となると最後の手段で、csshover.htc は諦めて IE7.js をお試しください。

------------------------------------------
ul#pulldown-menu { /* IE6 対策 */
behavior: url("csshover.htc");
}
は削除
------------------------------------------
<head></head> の中に以下のコードを追加

------------------------------------------

これでいかがでしょうか！

よろしくお願いいたします。

sakai | 2008年11月17日 18:30

sakai様

いつも迅速なご対応ありがとうございます。
やはりIEでは可動しませんでした・・・。

何が原因なのか分らず、なんとかならないでしょうか＞＜

ユウ | 2008年11月17日 19:07

＞ユウさん
こちらこそたびたびすみません。
上記のコメント、肝心なところがコメントアウトされちゃっていますね…

IE7.js はまだお試しではないですか？
------------------------------------------
<head></head> の中に以下のコードを追加

------------------------------------------

これでいけると思うのですが…
よろしくお願いいたします。

sakai | 2008年11月17日 19:20

sakai様

たびたびご返信本当に感謝いたします。

やりました！
きちんと表示されるようになりました＾＾

本当に感謝いたいます。

ご丁寧な対応本当にありがとうございました。

また機会がありましたら何卒宜しくお願い致します。

ユウ | 2008年11月18日 18:34

質問しておきながら、レスが非常に遅れて申し訳ないです！！
あれからあの手この手試して挫折、しばらく放置していたのですが、もう一度上記ユウ様あてのアドバイス試させていただきます！！

寺田 | 2008年11月24日 18:01

非常に困っていた時に、この情報を拝見して助かりました。
どうもありがとうございました☆(^▽^)☆

と、そこでひとつご質問なのです。
このプルダウンのメニュー表示までうまくいったのですが、
このプルダンメニューは、マウスがはずれるとすぐに消えてしまいますよね。
これを、少し時間を置いてから消す事はできないものでしょうか....f"^_^;

javascriptをかましたりしていろいろ頑張ってみたのですが、
どうしてもうまくいかなかったので、
ぶしつけで失礼だとは思ったものの、ここでご相談させていただきました。

どうかよろしくお願いします。m(_ _)m

yoshi | 2009年01月09日 23:46

＞yoshiさん
コメントありがとうございます。
JavaScript はあまり得意ではないので適切かわかりませんが、ご要望のような仕様にする場合は、プルダウンメニューの表示・非表示をコントロールする部分も JavaScript の関数に埋め込んでしまう必要があるかと思います。

あまりお力になれず申し訳ございません。m( _ _ )m

今後ともどうぞよろしくお願いいたします。

sakai | 2009年01月13日 19:29

ヒントをありがとうございます！　出来る限り頑張ってみます！
どうもありがとうございました☆(^▽^)☆

yoshi | 2009年01月14日 18:51

初めまして。『CSSで実現するﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ』とても参考になりました。さっそく自身のサイトに利用させて頂きました。

ただ、問題が2つありどうしても解消できません。

１つはサンプルをアレンジしてﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰを作ったのですが、どうしてもIE6でプルダウンが表示されません。
2つ目はブラウザのウィンドウの大きさを動かすと一瞬レイアウトが崩れます。

IE7、Firefox2、Opera9、Safariでは問題はありませんでした。

もし原因が解決出来るようでしたらお手数ですがご指導お願いできないでしょうか。よろしくお願い致します。

※実際に作った html、css とそれにリンクしたファイルをシンプルにまとめたものをアップしてあります。お忙しい中恐縮ですがご確認頂ければ幸いです。
↓↓↓↓↓↓
http://www.mariahome.jp/Test.zip

実際に『CSSで実現するﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ』を参考にして作ったサイト。
↓↓↓↓↓↓
http://www.mariahome.jp/index.html
※IE6ではﾌﾟﾙﾀﾞｳﾝが表示されません。

Ohmoto | 2009年01月23日 00:28

＞Ohmoto さん
コメントありがとうございます。返信が遅くなり申し訳ございません。

＞１つはサンプルをアレンジしてﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰを作ったのですが、どうしてもIE6でプルダウンが表示されません。
ダウンロードしたファイルのほうは、こちらの環境ではちゃんと見れました。
サイトのほうは現状プルダウンが表示されませんが、CSSで behavior プロパティがコメントアウトされているのが原因のような気もします。

＞2つ目はブラウザのウィンドウの大きさを動かすと一瞬レイアウトが崩れます。
これは、ブラウザのレンダリングのバグっぽいですね。
背景画像の使い方を変える等の抜本的な方法が必要になる気もします。

あまり役に立っていないかもしれませんが、ご参考ください。
今後ともどうぞよろしくお願いいたします。

sakai | 2009年01月26日 19:06

丁寧にご返答頂いて恐縮です。
頂いたコメントを参考に再度挑戦してみたいと思います。
ありがとうございました。

Ohmoto | 2009年01月27日 17:04

プルダウンメニューのすぐ下に、また同じようなプルダウンメニューを配置するのは可能でしょうか？上のプルダウンメニューの子メニューをマウスで下に辿っていきたいのですが、下に配置したプルダウンメニューが原因なのか、重なるところで子メニューが消えてしまいます。

なんとか解決する方法はないでしょうか？

kazu | 2009年01月31日 16:51

＞kazu さん
コメントありがとうございます。

ご指摘の件ですが、z-index でレイヤーの重なり順を調整してもうまくいきませんか？（確かに IE6 あたりは怪しい気もしますが…）
メニューを 2 つ配置するのであれば、ul 自体に z-index を指定する必要があるかと思います。お試しください。

今後ともどうぞよろしくお願いいたします。

sakai | 2009年02月02日 16:15

丁寧なアドバイスありがとうございますっ！
さっそく試してみます。

kazu | 2009年02月04日 23:40

sakaiさん

はじめまして。
このプルダウンメニューのテクニック、大変参考になります。
ありがとうございます。
１つ、質問させていただきます。

sakaiのサンプルとBBSのやりとりを参考して、一応、CSSでのプルダウンメニューは完成しました。
ただ、プルダウンメニューの直下に、FLASHで制作した.swfのコンテンツを、objectタグとembedタグで表示させているのですが、プルダウンのサブメニューが.swfの部分にかかってしまうと、サブメニューが表示されないのです。
サブメニューがFlash画像に覆いかぶさっても表示する方法はありますか？
アドバイス、何卒よろしくお願いします。

辰五郎 | 2009年02月11日 16:26

はじめまして！
プルダウンメニューの作り方、見やすく使いやすい！と思って、
試しに使わさせていただきました。（デザインは違いますが）
私は主にマック環境なので、マックではとても見やすい
デザインに仕上げる事ができて、感激しています！

ですが、IE6は試していませんが、
IE7で表示が崩れてしまいました。
7だとメニューが真下には来ないで右にずれてしまいます。
お手すきの折、いつでもかまいませんので、
ちらっと、見ていただけないでしょうか？
ご意見いただければ幸いです。
よろしくお願いいたします。

ちなみに、mac Firefox,safariは大丈夫でした。

あきら | 2009年02月11日 22:30

＞辰五郎さん
はじめまして、コメントありがとうございます。

ご質問の件ですが、以下のparam要素を追加すれば解決するかもしれません。
<param name="wmode" value="transparent">

弊社の Flasher の話では FlashPlayer のバージョンによって上手くいかないこともあるそうですが、まずはご参考ください。

＞あきらさん
はじめまして、コメントありがとうございます。

根本的な解決にはなっておりませんが、CSSに以下（IE7ハック）を追加することにより、とりあえず現象は回避できるかと思います。

*+html ul.pulldown-menu li ul {
margin-left: -50%;
}

IE7 で右に50%ズレる現象は以前にもご報告いただいておりますが、その後検証の時間を取れず…

ご参考ください。

今後ともよろしくお願いいたします。

sakai | 2009年02月12日 12:24

sakaiさん

早速のアドバイスありがとうございました。
<param name="wmode" value="transparent">を追加しただけでは、だめでしたが、
応用で、embedタグに、wmode="transparent"を追加したら、うまくFLASHファイルに重ねてサブメニューが表示できるようになりました。ありがとうございました。
感謝感謝です。

辰五郎 | 2009年02月12日 13:20

初めまして。『CSSで実現するﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ』とても、
シンプルで使いやすく、
ぜひ使用させていただこうと思っております。
ただ、問題があり、左ナビゲーションを2段構えで設置したかったのですが、
IE6で確認をすると、サブカテゴリーが、2段目のカテゴリーに隠れてしまっています。
ul#pulldown-menu li:hover ul {
display: block;
position: absolute;
z-index: 100;
}
はFFにしか効いていないのでしょうか？
お忙しいところ申し訳ございませんが、
ご解答いただければ、嬉しく思います。
何卒宜しくお願い致します。

hiro | 2009年02月18日 15:31

上記の件ですが、
自分で解決することが、できました。
CSS＆HTML使用させていただきます。
サンプルデータを配布して頂きありがとうございました。

hiro | 2009年02月18日 16:50

＞hiroさん
はじめまして、コメントありがとうございます。

問題についてはご自身で解決なされたということで何よりです。
今後ともどうぞよろしくお願いいたします。

sakai | 2009年02月18日 18:10

-50％の件，0px 0pxを追加したら↓直りました。
ul.pulldown-menu li:hover ul {
display: block;
position: absolute 0px 0px;
z-index: 100;
}
が，メニューの下に画像があるとクリックできません。
何がいけないのでしょう？

Jin | 2009年03月03日 17:26

＞Jin さん
コメントありがとうございます。

position: absolute 0px 0px;
はそのままだと書式エラーですので
position: absolute;
top: 0px;
left: 0px;
と書いたほうが良いですね。
これで IE7 の問題が解決するとのこと、検証してみます。情報ありがとうございます。

メニューの下に画像があるとクリックできない件は、おそらく IE のバグではないかと思います。
haslayout プロパティを変えると解決するケースが良くありますが、うーん、今回の場合はどうでしょうか…

時間が取れる時にちょっと検証してみます。

今後ともどうぞよろしくお願いいたします。

sakai | 2009年03月03日 20:12

こちらの記事を参考にさせていただき、プルダウンメニューを作りました。
ローカルでは思い通りに表示されたのですが、
サーバにアップしたら、プルダウンメニューのz-indexが効いていないのか、
本文のボックス（#b2）がサイドメニュー（#b1）の下になってしまいます。

こちらのローカル環境はWinXP IE6ですが、
ブラウザーショット
http://browsershots.org/なるものでスクリーンショットを確認したところ、
他のほとんどのブラウザで同じ現象が起きているようです。

どうしたら修正できるでしょうか。お助けください。
よろしくお願いいたします。

ぽけっと | 2009年04月03日 15:39

あ、すみません。さきほどのコメントでリンクがおかしなことに・・・

>ブラウザーショット
>http://browsershots.org/
>
>なるものでスクリーンショットを確認したところ、

です。
これで正しく表示されるかな？

ぽけっと | 2009年04月03日 15:42

＞ぽけっとさん
コメントありがとうございます。

拝見しましたが、カラムが落ちているのはプルダウンメニューは関係がないようでした。
ご参考まで、#b2 にあてている margin-left と padding-left を削除して、float を right にすると、カラム落ちが解消されるかと思います。

今後ともどうぞよろしくお願いいたします。

sakai | 2009年04月03日 16:54

丁寧なお返事をありがとうございます。

お返事をいただいてからずっと試しているのですが、
今度はCSSがまったく読み込まれなかったりして（不安定？）
どうもうまくいきません。

もう少しがんばってみます。

ぽけっと | 2009年04月05日 10:15

何度もすみません。

>、#b2 にあてている margin-left と padding-left を削除して、float を right にする
つまり #b2 を全部右基準にするということですよね？

（padding-left はそのままですが、）
おっしゃるように #b2 の float を right にしたのですが、
今度は #b の位置が #b1 内リンクをクリックしたときに動いてしまいます。
また、body 全体を中央寄せしているのに
ナビゲーションが中央にこないのはなにが原因でしょうか？

お手数をおかけしてほんとにすみません。
急ぎませんので、お手空きのときにでもお返事いただければ嬉しいです。
よろしくお願いいたします。

ぽけっと苦戦中 | 2009年04月13日 12:40

＞ぽけっとさん

拝見しました。IE でバグっているようですね。
概ねの理由は、ブラウザのデフォルトのスタイルをリセットしていないことから来ているようです。
まずは、使用している各要素の margin と padding を 0 にしてから、要素ごとのスタイルを決めていくとコーディングしやすくなりますよ。

ナビゲーションが中央に来ていないのは、float: left しているからです。
display: inline; にすれば、とりあえずは解決します。
また、CSS でボックスを中央寄せする場合は、text-align:center ではなくmargin の左右に auto を指定するのが正しいやり方です。そのあたりも見直したほうが良いかと思います。

CSS はトライ＆エラーがつきものですので、頑張ってください！

sakai | 2009年04月13日 13:22

迅速かつ丁寧なお返事をありがとうございます。

やってみます！

ぽけっと | 2009年04月14日 08:50

いろいろと調べましたがナビゲーションのセンタリングは無理？なようなので諦めました。
（display: inline;　にすると中央にはくるのですが、
　a要素が display: block;　のため？横並びが解除されてしまいました。）

ですが、今度はプルダウンされた部分が右にズレてしまいます。
以前のコメントの方のように margin に -50% を指定してみたところ、
50％ではないみたいで微妙にズレてしまいます。
これはパーセンテージを調整するしかないのでしょうか？

それから、ナビゲーションが container 以外どこのボックスにも入っていないのですが、
これはおかしいかもしれないという不安があります。

ほんとに何度も恐縮です。
自分でもあちこち調べてみてはいるのですが、
どうしても納得のいく答えにたどりつきません。
お手すきのときにお返事をいただければうれしいです。
よろしくお願いいたします。

ぽけっとあと少し | 2009年04月18日 12:24

＞ぽけっとさん
ナビゲーションのセンタリングは、ul に width を指定して、margin の左右を auto にするだけでいけますよ。簡単ですのでお試しください。

ちょっとズレるという不具合については、原因はわかりませんが CSS でデフォルトのスタイルをリセットしている箇所のセレクタが「,（カンマ）」で終わっているのを取ってみてもダメですか？
何にせよ、セレクタの最後がカンマだと IE 以外のブラウザでも正常にスタイルがあたらないと思います。

ナビゲーションが container 以外～という件に関しては、ul 自体がブロック要素なので何の問題もありません。
むしろ個人的には div は少ないほうが好みです。

sakai | 2009年04月20日 09:32

いつも丁寧なお返事をありがとうございます。
ナビゲーションのセンタリング、解決しました！

カンマのご指摘もありがとうございました。
ですが、
カンマとってもプルダウンの（-50%プラス）微妙なズレは直りませんでした。
なので position: abusolute に top と left で位置指定してみました。

まだ気になる点があるのでもう少しがんばってみます。
満足のいくものできあがったら報告にきます。

本当にどうもありがとうございました。

ぽけっと | 2009年04月21日 14:16

はじめまして。

いつも、凄く参考にさせてもらっています。

質問です。

Firefox・safariでは問題ありませんが、IEで見た時にプルダウンされている（４項目中）２項目までは、つながって表示されますが、２項目目と３項目目の間および３項目目と４項目目の間に隙間ができていて、そこをマウスカーソルが通過する時にプルダウンの表示が消えてしまい、一番下の４項目目までマウスカーソルを合わせることができません。

もしかしたら？
sakai | 2009年02月18日 18:10さんの現象もコレでしょうか？？？

原因を教えてください。お願いします。

哲 | 2009年04月23日 15:56

＞哲さん
はじめまして、コメントありがとうございます。

ご指摘の現象、上記の記事中のサンプルでも発生していますか？（であれば、OSやブラウザなど環境を教えていただけると有難いです）

IE でli の間に妙な隙間が空く、というのは割と良く起こりうるバグで、この場合 li に display: inline を指定すると直ったりしますが、試してみていただけますでしょうか。

よろしくお願いいたします。

sakai | 2009年04月23日 17:20

お返事ありがとうございます。

環境↓
Firefox・Safari　=　Mac OS 10.4.11
IE 7　　　　　　 =　Win XP VERSION 2002

制作はMacですが、チェック用のWinで見ると見えない状況です。

li に display: inline を指定してみましたが、今度は全てのブラウザで表示が変に（Firefox・Safariでは修正前のIEと同様に、IE 7では前回同様プラスプルダウンが右に）なりました…。

哲 | 2009年04月23日 18:15

お返事ありがとうございます。

記事中のサンプルは、全環境で見えています。

環境↓
Firefox・Safari　=　Mac OS 10.4.11
IE 7　　　　　　 =　Win XP VERSION 2002

制作はMacですが、チェック用のWinで見ると見えない状況です。

ちなみに、li に display: inline を指定というのは、CSS内の全箇所でしょうか？？

哲 | 2009年04月23日 18:19

＞哲さん
返信ありがとうございます。

記事中のサンプルは特に問題ないようであると、問題の起こっているページを拝見してみないとなんとも難しいところです…

display:inline を指定するのは問題が起こっている（隙間が空いてしまう）li のみです。
IE ハックで IE のみに適用するようにしないと、ご指摘のとおり他のブラウザで崩れてしまいます。

ただ、それでも IE で問題が解決していないようですので、当てずっぽうですが、今度は li に vertical-align:bottom を指定してみてはどうでしょう？

これ以上はちょっとページを見てみないとわからないです。すみません。

よろしくお願いいたします。

sakai | 2009年04月23日 18:27

お返事ありがとうございます。

教示いただいた内容を試しましたが、変化が起きませんでした…

本当なら見ていただきたいのですが、制作中で情報上での都合があるため見せることができない状況です……

ただ、自分の気持ち的に納得いくわけもなく、どうしても成功させたいので頑張ってみます。

ありがとうございました。

哲 | 2009年04月23日 18:54

初めまして
いつも参考にさせていただいています

途中まで作業を進めていましたが、FC2では.htcという拡張子をアップロードできないみたいです

他のサーバーを借りてリンクすることになってしまいます・・・

しかし、それだけのためにわざわざサーバースペース借りるのは迷惑だと思うので

なんとか、.htcファイルを使わずにIE6でもプルダウンを再現できる方法はないでしょうか？

よろしくお願いします

FC2ブロガー | 2009年06月13日 00:32

＞FC2ブロガーさん
コメントありがとうございます。

htc をアップロードできないのであれば、GoogleCodeで公開されている IE7.js を利用するのが手っ取り早いかと思います。

------------------------------------------

お試しください。
今後ともよろしくお願いいたします。

sakai | 2009年06月15日 11:28

大変参考になります。menu内のFont-Sizeを固定にするにはどうすればいいでしょうか。さらにサブmenuのみ文字を小さい設定にするためにはどう改造すればいいでしょうか。改造が成功すればURLにアップできると思います。

Charinker | 2009年06月25日 02:42

＞Charinker さん
コメントありがとうございます。

font-size 固定とのことですが、厳密にいうとモダンブラウザで font-size を固定することはできないので、メニューを画像にするしか方法はないと思います。
初期状態の font-size を小さくしておくということでしたら

ul#pulldown-menu li {
font-size: 12px;
}
ul#pulldown-menu li ul li {
font-size: 10px;
}

というように追記していただければ良いかと思います。

sakai | 2009年06月25日 16:31

sakaiさん
Font-Sizeの件、ご回答ありがとうございます。
早々実験してみます。

また、IE6対応についいてお伺いします。
まず、googlecodeの方法は成功しました。スムースに。
csshover.htc(最新はcsshover3でした)は手こずってます。
テスト環境はhtcファイルとhtmlファイル(cssも含む)をPCの同じフォルダに配置し、ブラウザで開いています。メインmenuのみ表示され、NG。
テスト環境がインターネットと分離した環境で行っているため、googlecodeの方法は実験中は向きません。
ご指南いただければ幸いです。よろしくお願いいたします。

Charinker | 2009年06月26日 01:22

＞Charinker さん
テスト環境に htc ファイルを置いても NG とのことですが、テスト環境はローカルにあるということですね？
確かに、ローカル環境だと htc を置いても上手いこといかない現象は何度か体験しています。
その場合、リモートにアップしてインターネット越しに確認するしかないのかな、と思っていましたが… ムムム。
ちょっと詳しいことがわからずすみません。

IE7.js をダウンロードしてきてサイトの中に置いてしまう方法であれば、htc を使わなくても良いので、そちらもお試しください。

よろしくお願いいたします。

sakai | 2009年06月26日 08:05

sakaiさん、大変お世話になります。
サブメニューのfont-size指定も成功しました。IE6対応についても、htcおよびgooglecodeも期待通り実験できました。以下にまとめます。
htcはＰＣでのローカル実装ではNG、サーバ配置(弊社レンサバ)ではＯＫ。
googlecodeは両場合でもＯＫです。
ちなみに、上のURLに実験のため作ったものですが、しばらくご覧ください。
IE6対策はhtcを採用したものです。8月になると削除の予定です。

的確なアドバイス、大変感謝しています。ありがとうございました。
シーブレインに幸あれ

Charinker | 2009年06月26日 14:25

CSS初心者の私にも大変参考になり、あれこれ自身でいじってみています。使用させていただきたいと考えています。いろいろ、ありがとうございます。
ひとつ質問ですが、孫メニューを加える際のXTMLとCSSの記述は、どうすればいいのでしょうか？海外サイトでこちらのようにシンプルな例を見てみたのですが、いまひとつ分かりません。お忙しいところすみませんが、教えていただければ助かります。よろしくお願いいたします。

のう | 2009年06月30日 11:32

sakaiさん、またまた問題発生です。サブメニューのズレとリストマーク付加が発生しました。これまで単体でプルダウンメニューをテストし成功しましたが「BIND」で製作のページに組み込んだところ、発生しました。
2008.10.18記事の
* {
margin: 0;
padding: 0;
list-style: none;
}
を記述していますが発生です。アドバイスいただけますようお願い致します。

Charinker | 2009年06月30日 15:58

＞のうさん
はじめまして、コメントありがとうございます。

孫メニューを加える場合とのことですが、コメント欄で解説させていただくにも限界がありそうなので、こちらは別途サンプルを作成してエントリーすることにします。来週末くらいまでには時間が作れそうなのですが少々お待ちいただいてもよろしいでしょうか。すみません。

基本的には HTML は ul を入れ子の入れ子にするだけで、CSS のほうで position を使ってなんとかする感じになります。

＞Charinker さん
それは、ul と li にそれぞれスタイルが指定されているのだと思います。
ul#pulldown-menu と ul#pulldown-menu li それぞれに margin:0; padding:0; list-style:none; を指定してみてください。
おそらく解決すると思うのですが…

sakai | 2009年06月30日 20:27

sakaiさま
さっそく、ありがとうございます。海外のは
XTMLが
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
になってまして、
CSSは
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background-color: yellow;
}
.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
こうでした。
HTMLで<li><a href="#">Folder 1</a>の
Folderと<li><a href="#">Sub Item 2.1.1</a></li>の関係、あとこれらをCSSでどう制御するのかが分かりません。
孫って、つくるの大変なんでしょうか？人間と違って。
お忙しいのに、ほんとうにすみませんです。
ご教授のほど、よろしくお願いいたします。

のう | 2009年07月01日 00:25

＞のうさん
貼り付けていただいたコードによると、JavaScript を使っていますね。
それで問題ないのであれば、CSS のみでなんとかするのは諦めて JS のライブラリを活用するほうが全然簡単です。
以下のエントリーなどをご参考ください。
http://c-brains.jp/blog/wsg/09/02/19-212529.php

どうしても CSS だけで！ということであれば、ちょっとサンプルを制作してみないと… という感じなので、少々お待ちいただけますでしょうか。

よろしくお願いいたします。

sakai | 2009年07月01日 10:25

sakaiさん、ご回答ありがとうございます。早々ためしました。
まず「List-Stype」は解消しましたがサブメニューのズレは変化なしでした。
そこで以下を追加したところ、ズレは解消しました。

ul#pulldown-menu li:hover ul
left: -10px

これで問題解消しました。ff,IE,CromeもＯＫです。

Charinker | 2009年07月01日 13:43

sakaiさま

お忙しいでしょうに、アドバイス、ほんとうにありがとうございます。 JS のライブラリ活用のほうが簡単なんですか・・・。エントリーを拝見して、トライしてみたいと思います。CSSだけだと、私のような初心者には大変なのですか？CSSも参考にしたいので、お手すきのときでもよろしくお願いします。

のう | 2009年07月02日 09:05

＞Charinker さん
上手くいったようでなによりです。
今後ともよろしくお願いいたします。

＞のうさん
CSS のみで孫メニューまでやるのもそれほど難しくないとは思います。
ただ、サンプルを作って検証するのにちょっと時間がかかってしまうので、すぐに明確な回答が出せなくてすみません。
来週末くらいにはお仕事が落ち着いて少し時間が取れると思いますので、そこで試してみます。
よろしくお願いいたします。

sakai | 2009年07月02日 11:05

sakaiさま

お忙しいところ、すみません。期待しながらお待ちします。
よろしくお願いいたします。

のう | 2009年07月06日 14:26

sakaiさま

孫メニューの参考例を見つけました。
http://www.cssplay.co.uk/menus/skeleton.html
これ、どうですか？
これの幅や色を替えてみたいと思います。

のう | 2009年07月08日 11:32

＞のうさん
参考例ありがとうございます。
HTML が複雑なのが難点ですが、なかなか綺麗なサンプルですね。

もっとシンプルに CSS のみで孫メニューまで実現するサンプルを作成していますが、本当すみません、実務のほうがひと段落するまでは検証を進められないので… 今週末にはなんとかエントリーをしますので、どうかお待ちください。

sakai | 2009年07月08日 11:40

＞のうさん
孫メニューまで実現したサンプルをエントリーしましたのでご参考ください。
http://c-brains.jp/blog/wsg/09/07/10-145749.php

よろしくお願いいたします。

sakai | 2009年07月10日 15:14

こんばんは＾＾
綺麗なプルダウンメニューを付くる用事があり、
あちこち見て、一番良かったので、活用させていただいております。

ただ、問題がありまして、
<frameset rows="60,*" frameborder="NO" border="0" framespacing="0">
<frame src="./_head.html" name="topFrame" scrolling="NO" noresize >
<frame src="./_body.html" name="mainFrame">
</frameset>

というindex.htmlがあり、
上のフレームにこのCSSで制作したプルダウンメニューを置いているのですが、
表示されるプルダウンメニューが、
下のフレームに隠れてしまいます。
便宜上、フレームを使用せずにというパターンは考えられないので、どうにかして、下のフレームをまたいで、
メニューが表示されるような設定はできないものでしょうか？

大忙しい中恐縮ですが、
よろしくお願いいたします。

クリスタ | 2009年07月18日 22:54

あ、ソースを書いたんですが、消えてしまいましたｗ

上下フレームで、
上フレームにプルダウンメニューを置いており、
(メニューのheightキワキワの高さで設定)
表示されるプルダウンメニューがきっちり、
下のフレームによって消えるという具合です。

クリスタ | 2009年07月18日 22:57

＞クリスタさん
コメントありがとうございます。

ご指摘の件ですが、フレームをまたいでポップアップメニューを表示するのはかなり難しいと思います。
フレームを使用しないパターンは考えられないとのことですが
・フレーム構造をやめる（CSSで疑似的に再現するとか）
・IFRAME にしてみる
というような思い切った改造がどうしても必要かと思われます。

お役に立てず申し訳ございません。
今後ともよろしくお願いいたします。

sakai | 2009年07月21日 10:25

初めまして。
こちらのプルダウンメニューのコードを使用させていただき、
サイトを作成いたしましたものです。
大変お世話になっており、深く感謝いたしております。

先日、そのサイトをgooglechromeで見たときに、
プルダウンした部分の画像が出ない現象に陥りました。
リンク領域はしっかりと表示されているのですが、
画像だけが呼べません。
もし原因に心当たりがあれば、恐れ入りますが教えていただけないでしょうか。
原因が不明な場合は無視してくださって結構です。
突然ずうずうしいお願いをして申し訳ありませんが、
どうぞ宜しくお願い致します。

山本 | 2009年07月31日 15:53

＞山本さん
はじめまして、コメントありがとうございます。

ご指摘の件、chrome で見てみたら確かに画像だけ表示されませんでした。
失礼ながらソースを追ってみたのですが、ちょっと原因は判明せず… お力になれず申し訳ございません。

プルダウンはできているようなので、CSS の background 関連（特にCSSスプライト用の記述あたり）が怪しいようにも思います。
background のショートハンドの記述をやめてみて、冗長ですがひとつずつ記述してみると、原因が判明しやすいかもしれません。

今後ともどうぞよろしくお願いいたします。

sakai | 2009年07月31日 20:40

プルダウンメニュー単体では7月にコメントしたように成功してました。サイトのページに組込み、アップしました。ところがIE6,IE7でプルダウンメニューが展開してしまいフリーズ／ハングしているようになります。IE7.jsはサイトに実装していますがこれがキャンセルされているような動作をします。サイトのページは「BiND2」で作成しました。
なにかアドバイスいただければ幸いです。また、こんなときどうやって調査すればいいか教えてください。商品案内のページです。
ＩＥのバージョンを判定してプルダウンをコメントアウトしようかと考えています。
何卒、よろしくお願い致します。

Charinker | 2009年09月08日 13:07

＞Charinker さん
コメントありがとうございます。
サイトを拝見しましたが、IE で起こる現象については初めて見るものでちょっと原因がわかりません…
IE7.js というより、他の JS の読み込みが上手くいっていないような印象ですね。
ちょっと手間ですが、ひとつずつ読み込む JS を外してみて、まずは IE でおかしくなる原因となっている JS を特定するのが良いかもしれません。

上手くいかないときの調査は、これはもうトライ＆エラーしかないと思います。
お力になれず申し訳ございませんが、頑張ってください！

今後ともよろしくお願いいたします。

sakai | 2009年09月09日 19:50

こんにちは。
はじめまして。

CSSプルダウンメニュー、ついさっき見つけて早速自分のサイトにも
使ってみたところ、普通のページではちゃんと動作しますが
「appletタグ」を使用してあるページですと
（ttp://gms.symphonic-net.com/game/m38.htmlなど）
Appletタグが上に来てしまい、プルダウンメニューが
隠れてしまいます。

どうすればよいでしょうか。

上にも同じような質問があり
「<param name="wmode" value="transparent">」を追加…
との話でしたが、うまくいきませんでした。

よろしくお願いします。

タケヒロ | 2009年11月23日 10:24

＞タケヒロさん
はじめまして、コメントありがとうございます。

ご指摘の件、現象を確認しました。
applet タグでは問題の回避が難しいかと思いますので、 applet タグを object タグに置き換える必要があるかもしれません。
object タグに置き換えたうえで、文中の param 要素を付与してみていただけますでしょうか。

今後ともよろしくお願いいたします！

sakai | 2009年11月24日 11:02

ありがとうございます。

appletタグのままではだめなのですね。

ただ、appletタグをobjectタグに変えただけではゲーム自体が
動かなくなってしまいました。
試行錯誤はしてみましたが…。

やはり難しいですかね。appletタグのままでは。
ちょっと考えてみます…

タケヒロ | 2009年11月24日 13:13

＞タケヒロさん
早速のご返答ありがとうございます。
applet タグを object タグに置き換えるのは以下に詳しいです。
http://oku.edu.mie-u.ac.jp/~okumura/java2/whichtag.html
ご参考になさってみてください。

今後ともどうぞよろしくお願いいたします。

sakai | 2009年11月24日 13:25

コメントありがとうございます。

CSSテクニックを紹介していただいているページで、
appletタグのことまでお世話していただいて本当に申し訳ないです。

教えていただいたページを参考に、objectタグに置き換えるところまでは
うまくいったんですが、その後objectタグに
wmode="transparent"を追加したり、
name="wmode" value="transparent"を全てのparamタグに追加したり
自体を追加したり
いろいろ試してみたものの、
ttp://gms.symphonic-net.com/game/testgamed1.html
のように、現象に変化はありませんでした。

何度も申し訳ないです。
回避するにはどうすればよいのでしょうか。

タケヒロ | 2009年11月24日 20:52

＞タケヒロさん
コメントありがとうございます。
こちらこそ、全然お役に立てずすみません ( >_< )

JAVA Applet を扱った経験がないので、もしかしたらお試しいただいた方法では上手くいかないかもしれません。
頑張ってググってみたのですが、この件の情報ほとんどないですね！
ただどうも、JAVA Applet 自体レイヤーを重ねるのにあまり向いていないようではありました。

もう少し情報を探してみますが、タグの置き換えまでしていただいたのに現時点で解決することができず、すみませんでした… ( >_< )

よろしくお願いいたします！

sakai | 2009年11月24日 21:36

＞全然お役に立てずすみません
いえいえ。
とんでもないです。
CSSのテクニックを教えていただいただけでも十分です。

＞現時点で解決することができず、すみませんでした…
こちらこそすいません。
CSSに関係ないところで情報提供していただいて申し訳なかったです。

私も、もう少し情報を探すことにします。

こちらこそ、よろしくお願いします。

タケヒロ | 2009年11月24日 21:41