ドロップダウンメニューを作るこのCSSどこが変？

解決済

質問者：toonie
質問日時：2012/01/07 00:48
回答数：4件

お世話になります。
Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。
ネットでの情報を参考にしながら、書いたソースが以下のものですが、
問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される
(2)テキスト分しか表示されない、きちんと画像全体を表示させたい！

個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。
もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。
もしよろしければアドバイスお願いします。

HTML---

<div id="global_nav">
<ul>
<li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">営業所</a></li>
</ul>
</li>
<li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li>
</ul>
</div>

CSS---

#global_nav {
float:right;
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
display:block;
border:0;
}
#global_nav ul {
list-style:none;
margin:0;
padding:0;
}
#global_nav li {
min-width:120px;
white-space:nowrap;
float:left;
}
#global_nav ul ul {
display:none;
position:absolute;
z-index:10;
padding-top:2px;
}
#global_nav ul ul a {
font-family:"ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size:0.75em;
color:#FFF;
background-image:url(../images/dawnmenu_button.gif);
height:40px;
width:120px;
text-decoration:none;
text-align:center;
padding:20px 10px 0 10px;
}
#global_nav li li {
clear:left;
position:relative;
width:100%
}
#global_nav ul li:hover > ul {
display:block;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.1

回答者： ORUKA1951
回答日時：2012/01/07 02:19

HTMLちゃんと書かなきゃ・・

<div class="nav">
　　<ul>
　　　　<li><a href="/">TOP</a></li>
　　　　<li><a href="./profile">会社情報</a>
　　　　　　<ul>
　　　　　　　　<li><a href="./profile/index.html">会社概要</a></li>
　　　　　　　　<li><a href="./profile/office.html">営業所</a></li>
　　　　　　</ul>
　　　　</li>
　　　　<li><a href="./B">Bボタン</a></li>
　　　　<li><a href="./C">Cボタン</a></li>
　　　　<li><a href="./D">Dボタン></a></li>
　　　　<li><a href="./E">Eボタン</a></li>
　　</ul>
</div>
もちろん、画像でもよいが・・・
class名をnavにしたのは、HTML5では
<nav id="global_nav">
　　<ul>
　　　　<li><a href="/">TOP</a></li>
　　　　<li><a href="./profile">会社情報</a>
　　　　　　<ul>
　　　　　　　　<li><a href="./profile/index.html">会社概要</a></li>
　　　　　　　　<li><a href="./profile/office.html">営業所</a></li>
　　　　　　</ul>
　　　　</li>
　　　　<li><a href="./B">Bボタン</a></li>
　　　　<li><a href="./C">Cボタン</a></li>
　　　　<li><a href="./D">Dボタン></a></li>
　　　　<li><a href="./E">Eボタン</a></li>
　　</ul>
</nav>
と書かなければならないからです。

　あとはスタイルシートを書くだけ。シンプルでしかも、どのようにでもデザインできます。デザインのためにHTMLを書くとHTMLもスタイルシートも複雑になる。そしてデザインを変えるときHTMLまで書き直さなきゃならなくなる。それじゃスタイルシートを導入する意味がない。

　今晩は遅いので寝る。明日の夜にでも続きを

- 0
- 件

通報する

No.2

回答者： DrFell
回答日時：2012/01/07 08:56

(1)ダウンメニューにしたいのにむしろ上部へ表示される

この問題は再現されませんでした。他のｃｓｓの指定が継承されているものと思われます。試しに、ここに挙げたものだけで、独立したファイルを作り表示させてみてください。下に垂れると思います。

(2)テキスト分しか表示されない、きちんと画像全体を表示させたい！
#global_nav ul ul a {
に対する指定ですよね？a要素はインライン要素です。つまり、高さや幅を持てませんので、heightやwidthに対する指定は無視されます。インライン要素とブロックレベル要素の違いの把握は重要です。基礎を復習してください。

で、この「#global_nav ul ul a {」内に、display:block;を入れるとheight:40px;width:120px;の画像でしたら表示されるようになるでしょう。html的にはインライン要素だけど、表示はブロックライン要素として表示するという意味です。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！
display:blockこれか！
非常に基礎的なことだと思いますが、いまいちこの要素の役割がよく分からなくて...でも今回の説明で復習することができました。
ありがとうございます!!

通報する

お礼日時：2012/01/08 23:02

No.3

回答者： ORUKA1951
回答日時：2012/01/07 19:37

　まあ、理屈さえ知っていれば簡単です。

position:absoluteは直近のstaticでない親コンテナブロックの位置を参照する。

　ネット上のサンプルを見るときは、必ず仕様書と照らし合わせて、なぜそうなるかを理解しないと応用は利きません。無駄に時間を浪費するだけです。
★いくつかの重要なポイント
・折角の【カスケーディング】スタイルシートです。【カスケーディング】はプロパティよりも重要です。
→6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　カスケーディングを理解していれば無用なclass名やidを書かなくて済みます。

★HTMLはデザインにひこずられたらダメです。きちんと文書構造にしたがってマークアップしましょう。文書構造とプレゼンテーションを切り離すことがスタイルシートの最大の目的です。それが出来れば、後でデザインは自由に出来ます。
→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　たとえば、サイト全体のナビゲーションは本文セクションに入るのはおかしいのでフッターに入れるべきですが、それでもサンプルのように希望通りデザインできます。
　floatでデザインすれば、必ず本文ないしヘッダ直前に入れなければなりませんね。

下記サンプルは、HTML4.01strictです。(HTML5に変更するときは、doctypeを書き換えて、<div class="header">を<header>、同様に<section><nav><footer>にdiv要素を書き換える。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
★なお、＿に戻してください。詳しい説明はソースに書かれていますが、わからないときは仕様書を、まず確認すること。
★ウィンド巾に関わらず中央に表示されます。i-hone,i-padには文字が小さくなりすぎるけど読めるはず・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿</div>
＿<div class="section">
＿＿<h2>本文</h2>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<div class="nav">
＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/">TOP</a></li>
＿＿＿＿＿＿<li class="botanA"><a href="./profile">会社情報</a>
＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿<li><a href="./profile/index.html">会社概要</a></li>
＿＿＿＿＿＿＿＿＿＿<li><a href="./profile/office.html">営業所</a></li>
＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿＿<li><a href="./B">Bボタン</a></li>
＿＿＿＿＿＿<li><a href="./C">Cボタン</a></li>
＿＿＿＿＿＿<li><a href="./D">Dボタン</a></li>
＿＿＿＿＿＿<li><a href="./E">Eボタン</a></li>
＿＿＿＿</ul>
＿＿</div>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

詳しい回答本当にありがとうございます。
実際のサンプルもとても参考になりました、感謝します。
詳細に説明くださったのに、カスケーディングという概念がいまいちよく分からなくて、リンクページも読ませていただきましたが、正直なところ？でした。申し訳ないです。

それでも、一応ORUKA1951さんのソースを参考にさせてもらいながら、記述してみたのが、以下のソースです。

２点ほど疑問が出てきました。
(1)
ORUKA1951さんのソースでは、その他のボタンと同じくドロップダウンボタンの記述ありの親ボタン、そしてul li ul liの第二階層のボタンどちらにもカーソルオンしている状態の時にも親要素のボタンはロールオーバーしていましたが、私の記述の仕方に問題ありなのでしょう、親ボタンの領域にカーソルオンした時はOKでしたが、ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。
これはどうしたら解決できるのでしょうか...

(2)
それと、#global_nav ul li のCSSでfloatしていますが、これはclearする必要はないのでしょうか？

もしよろしければ再度ご教授ください。

HTML---

<nav id="global_nav">
<ul>
<li><a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_07.gif" alt="店舗紹介ボタン" class="btn"/></a>
<ul>
<li><a href="#">Aページ</a></li>
<li><a href="#">Bページ</a></li>
<li><a href="#">Cページ</a></li>
</ul>
</li>
<li><a href="#"><img src="images/button_08.gif" alt="ご利用案内ボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_09.gif" alt="説明ボタン" class="btn"/></a></li>
<li><a href="blog.html"><img src="images/button_10.gif" alt="ブログボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_11.gif" alt="お問い合わせボタン" class="btn"/></a></li>
</ul>
</nav>

CSS---

#global_nav {
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
border:0;
}
#global_nav ul, #global_nav ul li {
list-style:none;
display:block;
margin:0;
padding:0;
}
#global_nav ul li {
width:120px;
position:relative;
float:left;
}
#global_nav ul li a {
clear:both;
display:block;
width:100%;
height:100%;
}
#global_nav ul li ul {
display:none;
position:absolute; top:52px;left:0;
}
#global_nav ul li ul li a{
width:120px;
height:30px;
color:#FFFFFF;
font-size:0.75em;
font-family:"ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height:30px;
text-align:center;
background-image:url(../images/dawnmenu_button.gif);
text-decoration:none;
padding-top:0px;
}
#global_nav ul li ul li a:hover {
background-image:url(../images/dawnmenu_button02.gif);
}
#global_nav ul li:hover ul{
display:block;
}

それと、今回記述しているDOCTYPEはXHTML1.0 Traditionalです。

通報する

お礼日時：2012/01/08 23:01

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2012/01/09 08:22

＞ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。

　:hoverしているのは、どの要素でしょう。そしてプルダウンメニュー上に:hoverしているときは、その要素の上にありますか？

＞これはclearする必要はないのでしょうか？

　なんのために？ここで、次に続く要素(回り込む要素)はどこにあるでしょう。

　HTMLの構造を簡単に頭に入れて、CSSだけを上から順番に何を選択しているか、セレクタの書き方を読み取ってください。大事なことは理解することです。特に詳細度の計算だけは身につけること。先の回答で示した参照先はよく読んでください。回り道のようですが、実際はもっとも早い方法です。(急がば回れ)