CSSでドロップダウンにしたいのですが

質問

下記サンプルのTOPPAGEという所をCSSでドロップダウンにしたいのですが、うまくいきません。
http://sample1.digi2.jp/

何が足りないのでしょうか？
お教えください。

回答No.2

ORUKA1951 · ベストアンサー

説明の追加です。
この方法だと、ウィンドウサイズいっぱい近くで表示されるため、ウィンドウ幅に依存しないはずです。＝スマホのような小さい画面でも。

なお気づきですが
*{font-size****;list-style***}のように、全称セレクタですべてのデフォルトのスタイルを消してしまうのはとてもまずいです。★これはオーサリングツール★が、しばしば利用している方法で、テンプレートをそのまま使用する場合は兎も角、すべての新しい要素が登場するたびに、スタイルを追加する必要があるため、スタイルシートがとてつもなく肥大化してしまいます。メンテナンス不能のサイトになってしまいます。
body#bodyのよな書き方もしません。一意セレクタは詳細度が高くて、後で修正できなくなります。単純に
body{}
でよいです。
　不必要にIDをつけないようにすると、HTMLもスタイルシートも簡潔になります。

回答No.1

ORUKA1951

動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#dynamic-pseudo-classes )で指定します。
HTMLが、
<div class="nav" id="siteMap">
　<ol>
　　<li><a href="/">Top</a></li>
　　<li><a href="/Product">Product</a>
　　　<ol>
　　　　<li><a href="/Product/1">製品１</a></li>
　　　　<li><a href="/Product/2">製品２</a></li>
　　　　<li><a href="/Product/3">製品３</a></li>
　　　</ol>
　　</li>
　　<li><a href="/Books/1">Books</a>
　　　<ol>
　　　　<li><a href="/Books/1">書籍１</a></li>
　　　　<li><a href="/Books/2">書籍２</a></li>
　　　　<li><a href="/Books/3">書籍２</a></li>
　　　</ol>
　　</li>
　　<li><a href="/Profile">Profile</a></li>
　　<li><a href="/Contact">Contact</a></li>
　</ol>
</div>
だとします。
きちんと順序だてて説明しますから、きちんと理解してください。わからない用語は、面倒臭くても、上記仕様書やそれぞれのリンク先で調べるほうが身に付くでしょう。

class名のnavは、文書構造を補完するために付けてあります。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
『HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
ここは、idを使ってスタイルを書きます。

#siteMap{
position:absolute;/* 絶対配置で位置を指定する */
top:0;left:0;/* 位置 */
width:100%;/* 幅を親コンテナブロックいっぱい */
/* 以下は継承されるプロパティなので一番親に書いておく */
line-height:30px;/* 一行の高さ(リンクが中央に表示されるように) */
text-align:center;/* ボタンやリンクが中央に表示されるように */
}

#siteMap ol,#siteMap ol li{/* (子孫セレクタ) */
list-style:none;/* 継承されないのできちんと指定する */
margin:0;padding:0;/* ブラウザごとに差があるので消しておく */
}

#siteMap ol{
display:block; /* ブロックに変更 */
width:100%;/* 幅は#siteMapの幅まで */
}
#siteMap ol li{
display:inline-block; /* CSS2.1の指定、後方互換ならfloat:left */
width:18%;/* これでウィンドウ幅の18%になる */
position:relative;/* 内包ブロックの位置やサイズの基準とするため */
border:solid 1px red; /* わかりやすくするためとりあえず枠をつけておく */
}
#siteMap ol li ol{
position:absolute;/* 他と切り離すため、位置やサイズの基準は↑position:relative; */
top:100%;left:0;
}
#siteMap ol li ol li{
width:100%; /* 先に指定したwidth:18%を直しておく */
display:block;/* たてに配置するのでblock */
}
/* プルダウンにするため、隠す */
#siteMap ol li ol{/* 詳細度が [0 1 0 3] */
display:none;/* 存在そのものを消す */
}
/* 動的な擬似クラスで見せる。 */
#siteMap ol li:hover ol{/* 詳細度が[0 1 1 3]なので上書き */
display:block;
}
/* デザインを指定する */
#siteMap ol li{
background-color:fuchsia;
border:solid red 1px;/* 背景画像とか */
}
#siteMap ol li:hover{
background-color:yellow;/* 色名のキーワードは16色 */
}
/* ボタン全体でリンクが働くようにblockにしておく */
#siteMap ol li a{
display:block;
width:100%;height:100%;/* 基準は最も近い、static以外の親コンテナ */
text-decoration:none;
}

ここまでを、一つ一つの宣言を追加しては表示を確認して、なにをしているのか理解すること。

最後に整理して置きます。
#siteMap{position:absolute;top:0;left:0;width:100%;line-height:30px;text-align:center;}
#siteMap ol,#siteMap ol li{list-style:none;margin:0;padding:0;}
#siteMap ol{display:block;width:100%;}
#siteMap ol li{display:inline-block;width:18%;position:relative;background-color:fuchsia;}
#siteMap ol li ol{position:absolute;top:100%;left:0;display:none;}
#siteMap ol li ol li{width:100%;display:block;}
#siteMap ol li:hover ol{display:block;}
#siteMap ol li:hover{background-color:yellow;}
#siteMap ol li a{display:block;width:100%;height:100%;text-decoration:none;}

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

やってみます。結果をご報告します。