<li>で並べたメニューのリンク色指定class

質問

<li>で並べたメニューのリンク色指定をクラスごとにする方法が分からず困っています。
図のような状態で、MENUは（赤）、TOPは（青）と２種類の色分けをしたメニューバーを作っています。
それぞれ、a:hoverのときに色が薄くなるよう指定したいのですが
うまくいきません。

●現在やっている方法

・htmlでリストを組み、それぞれリンクタグにクラス指定
　MENU（赤） … class="menu"
　TOP（青） … class="top"

・cssでclassのリンク色a、a:hoverを指定

【html】

<ul>
<li><a href=～ class="menu">MENU</a></li>
<li><a href=～ class="menu">MENU</a></li>
<li><a href=～ class="menu">MENU</a></li>
<li><a href=～ class="top">TOP</a></li>
</ul>

【css】

a.menu:link {
color: #000000;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #ff0000;
padding-left: 5px;
font-size: 10px;
margin-right: 10px;
}

a.menu:hover {
color: #cccccc;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #ffc5c5;
padding-left: 5px;
font-size: 10px;
margin-right: 10px;
}

…class="top"（青）も同じ感じ

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

クラスごとのリンク色指定がうまく認識されていない気がします。
記述が間違っているのでしょうか？それともそもそもこの方法が間違っているのでしょうか？
お恥ずかしながらこの場を借りて質問させて頂きました。
色々調べてみたのですが、苦戦しています。お知恵を貸して頂けると助かります。

回答No.4

ORUKA1951

>「div.nav ul li.top:hover～」の記述の仕方も知らなかったので助かりました。
　子孫セレクタの書き方のことでしょうか??

　あなたが書かれたスタイルシートは、CSS(カスケーディングスタイルシート)です。CSSの最大の特徴は、カスケーディングなのです。カスケーディングを知らなきゃ意味がない。
　プロパティなどを学ぶより、先に徹底的に身につけておかないと、スタイルシートは無論、HTMLも複雑怪奇なものになりますよ。
　⇒5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　⇒6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
　はすべて、しっかりね・
特に、
・セレクタと詳細度(特異性)
・カスケーディング

　HTMLが正しくてスタイルシートがうまく適用されなかったとしたら、詳細度で負けていたか、カスケーディングで上書きされてしまったかだからです。

回答No.3

ORUKA1951

間違ってはいません。原因はほかにある。
HTMLが正しくない--

　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
スタイルシートが正しくない
　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。』

　なお、そのような煩雑なHTMLやスタイルシートは書かないようにしましょう。手に負えなくなります。
★見やすくするため、全角スペースでインデントさせています。
<div class="nav">
　　<ul>
　　　　<li><a href="/Products">MENU</a></li>
　　　　<li><a href="/Books">BOOKS</a></li>
　　　　<li><a href="/menu">MENU</a></li>
　　　　<li class="top"><a href="/">TOP</a></li>
　　</ul>
</div>
と書いておけば良いです。divで囲んであるのは他とは違うブロックと言う意味でclass名でnavigationだと示しています。
これは、HTML5だと
<nav>
　　<ul>
　　　　<li><a href="/Products">MENU</a></li>
　　　　<li><a href="/Books">BOOKS</a></li>
　　　　<li><a href="/menu">MENU</a></li>
　　　　<li class="top"><a href="/">TOP</a></li>
　　</ul>
</nav>
となる部分です。

これに対してCSSは次のように書きます。横に並べることを想定しています。
div.nav ul,div.nav ol li{
list-style:none;margin:0;padding:0;
font-size:12px;line-height:20px;
}
div.nav ul{display:block;text-align:center;}
div.nav ul li{
display:inline;border-left:solid 5px red;
padding:0 10px 0 5px;
}
div.nav ul li.top{border-color:blue;}
div.nav ul li:hover{border-color:fuchsia;}
div.nav ul li.top:hover{border-color:aqua;}

たったこれだけです。随分とわかりやすくなっているはず。
・継承されるプロパティは継承させる。親に書く
・詳細度(特異性)を活用する。
　この二つはCSS(カスケーディングスタイルシート)のカスケーディングそのものです。

お礼

とても分かりやすい解説ありがとうございます。
topだけ別classでcss指定してあげればよいのですね。
「div.nav ul li.top:hover～」の記述の仕方も知らなかったので助かりました。

回答No.2

naokita

応用というか、簡素化というか、便利な利用方法が色々あります。以下一例ですが。

<ul id="nav">
<li><a href="http～">MENU</a></li>
<li><a href="http～">MENU</a></li>
<li><a href="http～">MENU</a></li>
<li class="top"><a href="http～">TOP</a></li>
</ul>

#nav a{
color: #000;
border-left: 5px solid #f00;
padding-left: 5px;
font-size: 10px;
margin-right: 10px;
}
#nav a:hover{
color: #ccc;
border-left-color: #ffc5c5;
}
#nav .top a{ border-left-color: blue;}
#nav .top a:hover { border-left-color: aqua;}

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

例えば、id="nav"としたのは、そのナビゲーションだけに適応するので、それ以外も指定したければ、全部のnavを削除すればよい。
class="menu"を取っリ除いたのは、個別指定よりも、id="nav"というグループに纏めて指定できるから。
全部を統一指定しつつ、 class="top"だけを＋個別指定で一部変更。
a ではなく li に指定したのは、li でも変更がある場合が多いから。
（classを指定せずに、li+li+liでもできますがIE6では不可）

個別指定ではなく、グループで纏めれば簡単だよって話。

----------------
因みに、
ナビゲーションメニューを装飾する例では、良く display:block; を利用しますけどね。

お礼

分かりやすい解説ありがとうございます。
まだwebを少しずつ覚えている段階で、コードがごちゃごちゃになってしまうので「こうやってシンプルにするんだ」と勉強になりました。

display:blockも見落としていました。ありがとうございます。

回答No.1

kmee

手元のfirefoxではマウスオーバーで薄くなります。

無駄が多い、ということを除けば、CSS自体の問題ではなさそうです。
( topとmenu,それぞれのlinkとhoverに同じ内容が重複しています。「カスケード」を利用すればlinkとhoverは色の設定だけで済みます)

○この内容が適用されていない
　・これ以外に間違いがあって、期待通りのCSSになっていない
　・これより優先されるCSSの記述がある
　・HTMLに間違いがある
　・読み込むファイルが違う
○対応していないブラウザを使って確認している

あたりが考えられます

お礼

ありがとうございます。
どうやら、これより先に優先されるcssの記述があったみたいで、そこも見落としていました。