cssのみ使用したプルダウンメニュー

質問

はじめまして。

cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。
コードとcssは以下です。
aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。

.main li .sub{
visibility:hidden;
}

で子孫リストは消えるものの、

.main li : hover .sub{
visibility:visible;
}

と設定しても現れてくれません。
どうすれば上手くいくでしょうか。
すみませんがよろしくお願いします。

・html

<nav class="common_width">
<ul class="main">
<li><a href="#">profile</a></li>
<li><a href="#">about</a>
<ul class="sub">
<li><a href="#">profile</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">itai</a></li>
</ul>
</li>
<li><a href="#">test</a></li>
</ul>
</nav>

・css

li{
list-style:none;
}

.common_width{
width:900px;
margin:0 auto;
}

a {
color: #000;
text-decoration: none;
transition: background 0.3s ease 0s, color 0.3s ease 0s;
}

/*全部のリスト*/
nav li{
width:150px;
}

/*直下のul*/
nav > ul{
width:650px;
margin:0 auto;
overflow:hidden;
}

/*直下のリスト*/
nav .main li{
float:left;
color: #9f9f9f;
position: relative;
margin-left:100px;
}

nav .main li:first-child{
border-left:none;
margin-left:0px;
}

nav ul>li a{
padding:10px 0 10px 0 ;
background-color: #ccc;
display: block;
text-align: center;
line-height:1;
}

nav li:hover > a{
color: #fff;
background-color: #000;
}

.main li .sub{
visibility:hidden;
}

.main li : hover .sub{
visibility:visible;
}

nav ul li a:hover{
color: #fff;
display:block;
background-color: #000;
}

nav .sub li {
font-size: 12px;
color:#fff;
border-top:1px dotted #fff;
text-align:center;
margin-left:0px;
}

回答No.3

tracer · ベストアンサー

文法的なことはさておいて、気になる点が2つ。

1. liとhoverの間の:(コロン)の両端に余分な半角スペースがありますが、コピペしたとしたら、これでは動作しません。
.main li : hover .sub{
visibility:visible;
}

2.display:noneではなく、visivility:hiddenにするのはなぜでしょう。

html/cssに慣れていない方全般に言えることですが、ブラウザには標準で強力な開発ツールがついています。開発ツールの使い方を覚えれば、今回のレベルの質問はほぼなくなると思います。

お礼

質問への直接的な回答でしたのでベストアンサーに選ばせて頂きました。
ご回答ありがとうございました。

補足

ご回答ありがとうございます。
chromeのデベロッパーツールを使用することはあるのですが、エラーの原因が分からなかった場合に見て貰える人もいないので、中々抜け出せないのが正直なところです...

文法的なこと、というのも気になるのですが、ご指摘があった２点についてです。

1,
「可読性のため」と思って安易に半角スペースを入れていましたが、これが原因だったんですね...

2,
参考にしたサイトがvisivilityで設定していたので、そのまま使用していました。
プルダウンメニューを用いるときはdisplayで設定するのが一般的なのでしょうか？

回答No.6

ORUKA1951

No.1,2,4です。
＞詳細度が高くなる&他の人が見やすいことを考えると、ul li ul li の方が良いかもしれませんね。
・HTMLに文書構造だけ記述すればよいので
　HTMLが簡素で分かりやすくなりメンテナンス性が向上する。
　(例)
　　<div class="left">と書いていて将来右に置きたくなったら？？
　　同じものを<div class="nav">だとどうにでもなる。
　　　検索エンジンもnavのclass名は理解してくれる。

　詳細度を含むカスケーディングの仕組みはCSSの命ともいえる仕組みですが、詳細度は後からついてくるものです。そのためにじゃない。
div.nav ol,div.nav ol li{list-style:none;margin:0;padding:0;}
とすると、そのHTML内のナビゲーションリストはすべてブロックでmarginもpaddingも0になる。
　そのうえで、div.header div.nav ol li{display:inline-block;width:20%;}で、div.header(ヘッダブロック)内(半角スペースの子孫セレクタ)のナビげーョンとなるし、div.section div.nav{width:20%;position:absolute;top:0;left:0;position:absolute;}
div.section div.nav ol li{width:100%;}
とすれば、本文内のナビゲーションリストは左に配置される。

　HTMLにデザインのためだけに、classやidを使わないほうが、楽になるのです。
＞floatについては画像周囲にテキストというより、右と左に要素を分けるという認識でしたので、
　これは、最初のカスケーディングスタイルシートCSS1.0では、inline-blockがなかったために、やむなくfloatを使用していた痕跡です。
　今はIE7以前のブラウザは無視してよいですから、floatじゃなくinline-blockを使う。

※デザインのためにHTMLを書かずに様々にデザインする例
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　代替スタイルシートに対応したブラウザ--google Chrome以外)で、[表示]→[スタイル(シート)]に進んで、他のスタイルを選択したり、印刷プレビューで印刷を確認してご覧なさい。スタイルシートなしやLynxブラウザで見ると検索エンジンがどう見ているかも分かります。

お礼

スタイルの変更はクラスの中身のことだと思っていましたが、
クラスの名前のことも含めてだったんですね。

アドレス先でのスタイルの変更をしてみると、同じ構造でありながら柔軟に見た目が変化して
驚きました。
今後は以前よりも構造を意識しながらcssを書いていこうと思います。

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

回答No.5

tracer

> 参考にしたサイトがvisivilityで設定していたので、そのまま使用していました。
> プルダウンメニューを用いるときはdisplayで設定するのが一般的なのでしょうか？

どちらが一般的で、どちらが正解ということではないです。
display:noneとvisivility:hiddenの違いを調べていただければ、その時々でどちらが必要かは明白です。
visivility:hiddenは、非表示でありつつも表示領域が確保されるわけですが、今回のドロップダウンにその領域確保が必要かどうかということです。状況によりけりなのでなんとも言えませんが、多くの場合、必要のない表示領域は不具合を発生させます。

補足

なるほど、場合によって使い分けるということですね。

visiblity:hiddenでは見えない領域ができるので、余白スペース(プルダウンメニューと本文との余白)を確保したいときはdisplay:none と margin もしくは paddingを併用しながらするのがいいように思いました。

回答No.4

ORUKA1951

No.2です。
★半角スペースは子孫セレクタ
★基点セレクタがない場合は*(全称セレクタ)が省略されていると見なす。
li{} 要素セレクタ 詳細度 [0,0,0,1]
.common_width{}　クラスセレクタ 詳細度[0,0,1,0]
　　この書き方はCSS1、CSS2では、*.common_width{}と判断される。
　　★nav.common_width{}
a {} 要素セレクタ 詳細度 [0,0,0,1]
nav li{}　要素セレクタ(子孫セレクタ)要素セレクタ 詳細度[0,0,0,2]
nav>ul{} 要素セレクタ(子供セレクタ)要素セレクタ 詳細度[0,0,0,2]
　　★この場合は半角スペースは無視されるが、書かないほうが良い
nav .main li{} 要素セレクタ(子孫セレクタ)クラスセレクタ)子孫セレクタ)
　　詳細度[0,0,1,2]
　　★nav ul.main li{}
nav .main li:first-child{}
　　要素セレクタ(子孫セレクタ)クラスセレクタ(子孫セレクタ)擬似クラス
　　詳細度[0,0,2,2]
　　★nav ul.main li:first-child
nav ul>li a{}
　　要素セレクタ(子孫セレクタ)要素セレクタ(子供セレクタ)要素セレクタ(子孫セレクタ)要素セレクタ
　　詳細度[0,0,0,4]
nav li:hover>a{}
　　要素セレクタ(子孫セレクタ)要素セレクタ(擬似クラスセレクタ)(子供セレクタ)要素セレクタ
　　詳細度[0,0,1,3]
　　★半角スペースは書かないほうが良い。他と整合性が取れない。
.main li .sub{}
　　クラスセレクタ(子孫セレクタ)要素セレクタ(子孫セレクタ)クラスセレクタ
　　詳細度[0,0,2,1]
　　★本来は、*.main li *.sub詳細度[0,0,2,1]
　　または、ul.main li dnav.sub 詳細度[0,0,2,3]
.main li : hover .sub{}
　　クラスセレクタ(子孫セレクタ)要素セレクタ(子孫セレクタ)不明×・・
　　ul.main li:hover ul.sub とかになるはず。

以下省略

　見よう見まねでセレクタ、HTML書いては失敗します。
　header nav ul li{}
　header nav ul li ul li{}
　　で特定できるものを無駄なclassを書いたり、セレクタ書いたから分からなくなる。
　↑だったら、headerないのnavの子孫のulの子孫のliだと誰が見ても分かる。

HTML/CSSの仕様書を読んでみることをお勧めします。

＞＞>HTMLをデザインのために書いたらダメ
＞という意味がよく分からなかったのですが、ulにクラスを使わないように、ということでしょうか？
　そうです。
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」はDIVやSPANに限らず、いえることです。セレクタを理解していれば、無駄なclassは書く必要がないはずです。

　inline-blockを使用しているのは、floatでは中心に来ないことが最大の理由です。inline-blockだと、少し小さめにして中央に並べることができて、崩れることも少ないから。そもそもfloatは、画像の周囲にテキストを回りこませるための仕組みで、本来の用途ではない。すでにfloatで画像などが配置してある文中に横並びメニューを置こうとしたら困るでしょ。本来の用途に反する使い方はしないほうが無難です。

補足

nav ul li ul li

と書くよりも自分の中ではクラスを指定して書く方がすっきりして理解しやすかったので、そうしていました。

詳細度が高くなる&他の人が見やすいことを考えると、ul li ul li の方が良いかもしれませんね。

floatについては画像周囲にテキストというより、右と左に要素を分けるという認識でしたので、cssの仕様書を読んで勉強したいと思います。

回答No.2

ORUKA1951

＞>HTMLをデザインのために書いたらダメという意味がよく分からなかったのですが、
　2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

＞何が原因で僕のコードは上手く機能しないのかを
　セレクタの書き方が間違っている。
★半角スペースは子孫セレクタ
★基点セレクタがない場合は*(全称セレクタ)が省略されていると見なす。
Selectors - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#pattern-matching )

お礼

ありがとうございます。
コードも無事に直りました。

リンク先を拝見しましたが、僕の知識量ではCSSを書いて設定することを言ってるのかな、と思った限りで...
真意に辿り着けているかは定かではないのですが、教えていただきありがとうございました。

回答No.1

ORUKA1951

<div class="nav">
＿<ul>
＿＿<li><a href="/">Top</a></li>
＿＿<li><a href="/">Books</a>
＿＿＿<ul>
＿＿＿＿<li><a href="/Books/1">Book1</a></li>
＿＿＿＿<li><a href="/Books/2">Book2</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="/Products">Products</a>
＿＿＿<ul>
＿＿＿＿<li><a href="/Products/1">Products1</a></li>
＿＿＿＿<li><a href="/Products/2">Produc</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="/ContactUs">ContactUs</a>
＿＿＿<ul>
＿＿＿＿<li><a href="/ContactUs/form">Form</a></li>
＿＿＿＿<li><a href="/ContactUs/info">Information</a></li>
＿＿＿</ul>
＿＿</li>
＿</ul>
</div>

として基本形は
div.nav ul,div.nav ul li{
list-style:none;
margin:0;padding:0;font-size:0;
position:relative;
line-height:30px;
text-align:center;
}
div.nav ul{width:80%;font-size:0;margin:0 auto;}
div.nav ul li{display:inline-block;width:20%;font-size:16px;}
div.nav ul li ul{width:100%;display:none;position:absolute;top:30px;left:0;}
div.nav ul li ul li{display:block;width:100%;}
div.nav ul li:hover ul{display:block;}
div.nav ul li a{display:block;width:100%;height:100%;background-color:yellow;}
div.nav ul li a:hover{background-color:orange;}

かな・・ニ階層だろうが三階層だろうがお好きに。
HTMLをデザインのために書いたらダメです。後でデザイン変えるとき困るし、そもそもHTMLもスタイルシートも煩雑でメンテナンスでできなくなりますよ。

ちなみにHTML5だと
<div class="nav">・・</div>が<nav>・・</nav>に変わるだけです。

※ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　にて、[表示]→[スタイルシート]でスタイルシートを変更してみましょう。HTMLには文書構造しか書かれてないので好きにデザインできる。

補足

ご回答ありがとうございます。

>HTMLをデザインのために書いたらダメ
という意味がよく分からなかったのですが、ulにクラスを使わないように、ということでしょうか？
もしcssのことでしたら、外部から読み込んではいます。

回答して頂いたものと比較すると、floatではなくinline-blockを使用している点が大きく違うのかなと思っているのですが、何が原因で僕のコードは上手く機能しないのかを教えて頂けるととても有り難いです。