複数の画像にメニュー表示させたい

質問

説明が下手で申し訳ないです。
現在hpのリメイクをしています、以前はテーブルでレイアウトを組んでselectタグで画像上部にプルダウンを設置していました。
（※画像参照）

今は、
・上にプルダウンメニュー
・下に画像

のように分かれていますが、これを一つの画像として作成して
画像のある部分をマウスクリックすると、メニュー表示されるようにしたいです。

当初考えていた二つに分けて設置だと、場所の指定や書くコードが多すぎるのかと思い
一つの画像として扱おうと変更しました。

回答No.1

ORUKA1951 · ベストアンサー

なるほど・・・
　重要なことは、すべてナビゲーションリンクだと言うことです。HTMLは文書構造を示すものだと言う基本に戻ってください。
　たとえば、いくつかのグループに分けられるリストだとすると、
<div class="nav" id="GOODS">
＿<ul>
＿＿<li class="dust"><a href="">集塵機・グラインダー</a>
＿＿＿<ul>
＿＿＿＿<li><a href="">コンパクト集塵機</a></li>
＿＿＿＿<li><a href="">プラセスボックス</a></li>
＿＿＿＿<li><a href="">新卓上集塵機</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li class="buff"><a href="">バフ</a>
＿＿＿<ul>
＿＿＿＿<li><a href="">綿バフ</a></li>
＿＿＿＿<li><a href="">キャラコ</a></li>
＿＿＿</ul>
＿＿</li>
・・・【中略】・・・
＿</ol>
</div>
になるはずですよね。

　たぶん、もっとしゃれたデザインもあると思いますが、とりあえず既設のものと同じタイプのナビゲーションリストになるものでしたら、あなたが最初に書かれたようにfloatでも良いでしょう。

div.nav{width:80%;margin:0 auto;position:relative;min-width:450px;max-width:900px;}
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:20px;}
div.nav ul li{width:150px;height:150px;float:left;margin:5px;border:solid blue 1px;}
div.nav ul li.dust{background-position:0 15px;}
div.nav ul li.dust{background-image:url(./images/1.TOP.jpg);}
div.nav ul li li{float:none;margin:0;border:none;height:auto;margin:0;}
div.nav ul li ul{display:none;}
div.nav ul li:hover ul{display:block;}
div.nav ul li a{display:block;text-decoration:none;background-color:black;color:white;}
div.nav ul li ul li a{display:block;width:80%;text-decoration:none;background-color:white;margin:0 auto;color:black;border:solid 1px blue;}

　これを参考に色々と工夫してみてください。スタイルシートのそれぞれのプロパティは仕様書( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )をご覧ください。(この邦訳はCSS2のもので、CSS2.1の邦訳は知りません。多少変更があります。)
　兄弟セレクタや子供セレクタに対応していない古いブラウザにも対応させるため、CSSは多少長くなっています。
　tableと異なり、ウィンドウ巾450px以上では、i-phoneを含めてスクロールなしで問題なく閲覧できるでしょう。

　私の本業と少しかぶる部分もあるので、簡単にしか紹介できません--申し訳ありません。--。しかし、最低限必要なことはすべて書いてあります。あとは工夫してください。

お礼

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

HTMLの基礎部分とCSSでの装飾に関する点をこれを参考に
勉強させていただきます。