ドロップダウンメニューについて質問です。

質問

横並びのナビゲーションに更にドロップダウンをつけたいのですがうまくいかないので質問させていただきます。

メニューはそれぞれバッググラウンドで使ってます。
横並びのナビげーションはできました。
ロールオーバー時の画像の入れ替えもできました。

コレクション部分のドロップダウンがうまくいきません。
ドロップダウンで3つでるようにしたいと思うのですが

現状のHTML&CSSを記載します。
よろしくお願いいたします。

html
<div id="navi">
<ul>
<li class="nav_03">
<ul class="sub">
<li class="nav_001"></li>
<li class="nav_002"></li>
<li class="nav_003"></li>
</ul>
</li>
</ul>
</div>

CSS

#navi {
height: 10px;
width: 650px;
margin-top: 34px;
margin-left: 154px;
margin-bottom: 75px;
}

#navi li
{
float:left;
list-style-type: none;
}

.nav_03 a {
height: 10px;
width: 54px;
background-image: url(../images/navi/catalog.jpg);
background-repeat:no-repeat;
display:block;
text-indent:-9999px;
margin-right: 42px;
}
.nav_03 a:hover {
height: 10px;
width: 54px;
background-image: url(../images/navi/catalog_r.jpg);
background-repeat:no-repeat;
display:block;
text-indent:-9999px;
margin-right: 42px;

#navi ul.sub li {
float: none;
height: 10px;
width: 54px;
list-style-type: none;
}

#navi ul.sub li a {
background: none;
height: 10px;
width: 54px;
}

#navi ul.sub .nav_001 li a:hover {
background-image: url(../images/navi/tops_r.jpg);
height: 10px;
width: 54px;
display: block;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
}
#navi ul.sub .nav_001 li a{
background-image: url(../images/navi/tops.jpg);
height: 10px;
width: 54px;
display: block;
background-repeat: no-repeat;
}

/*サブメニューを、カーソルが乗るまで非表示にしておく設定*/
ul .nav_04 li ul {
display: none;
}

/*サブメニューを、カーソルが乗った時に表示する設定*/
#navi ul li:hover .sub .nav_001{
display: block;
position: absolute;
z-index: 100;
background-image: url(../images/navi/tops.jpg);
height: 10px;
width: 54px;
display: block;
float:left;
line-height: 180%;

}
#navi ul li:hover .sub .nav_002{
display: block;
position: absolute;
z-index: 100;
background-image: url(../images/navi/bottoms.jpg);
height: 10px;
width: 54px;
display: block;
float:left;
line-height: 180%;

}}

回答No.1

ORUKA1951

}の位置がおかしいためエラーになります。それが原因かもしれません。
→W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )

　しかし、そんな煩雑なHTMLもCSSも書きません。途中で見るのを止めました。多分ご自身でも「わけわかめ」じゃないかと思います。
　コメントや重複した改行を除いても80行を超えている、せいぜい特定のブロックのスタイルシートはテキストエディタでみて40行程度に抑えないと、後日のメンテナンスが大変です。(今でさえ大変なのに・・)

　スタイルシートを簡潔に書き、かつ適用させるためには、HTMLも正しくなければなりません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より

　スタイルのためだけにidをつけてしまうと、それ(一意セレクタ)自体の詳細度がb=1なので、カスケーディングが使いにくくなります(CSSとはカスケーディングが命)。
・基本的に同じプロパティは一回しか書かない。
　セレクタのグループ化をする。
　継承されるものは継承させる。そのために詳細度を計算する癖をつけましょう。
・プロパティの書き方を工夫する。
　同じ性質のプロパティは、一行ないしまとめておく。
　プロパティは一括指定を使う。
・きちんと接続詞、タイプを記述して他の部分に影響を与えないようにする。
　.class名だと、CSS2.1では*(全称セレクタ).class名と判断されます。p.strongとblock.strongが区別されない。
　区別しなくてよいときだけ、*.class名 と書き、通常はタイプセレクタと併用する。
・HTMLは文書構造を的確に示すこと
　それによって、スタイルシートを編集するときにHTMLを開かなくてもよくなります。
　divやidの名称は文章の構造を示すものにする。(リンクの終端でもないのに不必要なIDはつけない)
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

下記がサンプルになります。
★ウィンドウ幅は様々です。固定したらダメなのでi-phone,i-padからとても広いウィンドウにも合わせてあります。
　これはとても重要です。--ひとつのHTMLが、携帯電話も読み上げブラウザも展示端末もで利用できることが最大の利点なのですから
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきである・・・【中略】・・・なぜならただ1種類の文書しか作る必要がなくなるからだ。・・・【中略】・・・ HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。・・・【略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　ウィンドウ幅を変えてご覧ください。

★HTMLを見なくても、スタイルシートを読むだけでどこの何について指定しているかわかるはず
　これで行数は（同じ性質のプロパティはまとめてありますが）、24行しかありません。

★以下で検証済みです。
→Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
→W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )オプションでCSS3を選択
　※CSS2.1の場合、
　div.nav ul li ol li:last-child a{}をdiv.nav ul li ol li+li+li a{}に変更すること。aの属性セレクタ a[href="profile/recruit.html"]を使っても良いですが、いずれも古いブラウザIE6以前は未対応です。それらに対応させるためには、aにclass名をつけると良いでしょう。

※タブは＿に置換してあります。元のタブに戻してテストしてください。具体的な値は、あなたのイメージに合わせて変更してください。

<!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" media="screen">
<!--
div.nav{
＿height:20px;;width:auto;
＿line-height:20px;
＿margin:34px auto;
＿min-width:450px;max-width:650px;
}
div.nav ul,div.nav ol,div.nav ul li{
＿display:block;list-style:none;
＿margin:0;padding:0;
}
div.nav ul{margin:0 40px 0 0;}
div.nav ul li{height:100%;width:30%;float:left;}
div.nav ul li ol li{float:none;width:100%;}
div.nav li a{
＿display:block;
＿width:100%;height:100%;
＿text-align:center;
＿background-image:url(../images/navi/catalog.jpg);
}
div.nav ul li a:hover{background-image:url(../images/navi/catalog_r.jpg)}
div.nav ul li ol li a{background-image: url(../images/navi/tops.jpg);}
div.nav ul li ol li:last-child a{background-image: url(../images/navi/bottoms.jpg);}
div.nav ul li ol li a:hover{background-image: url(../images/navi/tops_r.jpg);}
div.nav ol{display:none;}
div.nav ul li:hover ol{display:block;}
-->
＿</style>
</head>
<body>
＿<h1>サンプル</h1>
<div class="nav">
＿<ul>
＿＿<li><a href="proflie">会社概要</a>
＿＿＿<ol>
＿＿＿＿<li><a href="profile/place.html">所在地</a></li>
＿＿＿＿<li><a href="profile/history.html">歴史</a></li>
＿＿＿＿<li><a href="profile/recruit.html">採用</a></li>
＿＿＿</ol>
＿＿</li>
＿＿<li><a href="/product">製品</a></li>
＿＿<li><a href="/contactUs">問合せ</a></li>
＿</ul>
</div>
</body>
</html>