ＨＴＭＬを教えてください。選択ＢＯＸ、プルダウン関係です

http://yahoo.jp/box/R9shZX

この画像をみてください

左説明します
1を選択しますと右の6個のＢＯＸも１が表示されます

右説明します
同様に2を選択しますと右の6個のＢＯＸに２が表示されます

プルダウン式での選択です

これらのＨＴＭＬを教えてください
お願いします

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/11/05 14:42

実例

<nav>
　<ol>
　　<li><a href="#A">ア行</a>
　　　<ol id="A">
　　　　<li>ア</li>
　　　　<li>イ</li>
　　　　<li>ウ</li>
　　　　<li>エ</li>
　　　　<li>オ</li>
　　　</ol>
　　</li>
　　<li><a href="#K">カ行</a>
　　　<ol id="K">
　　　　<li>カ</li>
　　　　<li>キ</li>
　　　　<li>ク</li>
　　　　<li>ケ</li>
　　　　<li>コ</li>
　　　</ol>
　　</li>
　</ol>
</nav>

nav ol,nav ol li{list-style:none;margin:0;padding:0;text-align:center;}
nav ol{position:relative;width:8em;background-color:yellow;}
nav ol li{width:100%;line-height:2em;border:1px red solid;}
nav ol li ol{position:absolute;top:0;left:8em;display:none;background-color:lime;}
nav ol li a{display:block;width:100%;height:100%;}
nav ol li:hover ol{display:block;}


最後の一行を下記に書き換えるとクリックしたときになる
nav ol li ol:target{display:block;}

たったこれだけ・・

nav ol,nav ol li{　　nav要素の子孫(半角スペース)のol、そのolの子孫のliは
　　list-style:none;　　　リストではない
　　margin:0;　　　　　　　内外の隙間なし
　　padding:0;
　　text-align:center;　　文字は中央配置
}

nav ol{　　　　　　nav子孫のolは
　　position:relative;　　これ以下の要素のサイズや位置の基準
　　width:8em;　　　　　　幅は8文字
　　background-color:yellow;　　背景色黄色
}
nav ol li{
　　width:100%;　　　　　↑　親のrelative参照
　　line-height:2em;　　　　　行の高さ２文字
　　border:1px red solid;　　　枠の指定
}
nav ol li ol{　　navの子孫のolの子孫のliの子孫のol
　　position:absolute;　　　絶対配置
　　top:0;left:8em;　　　　　上0、左8文字
　　display:none;　　　　　　隠して見せない
　　background-color:lime;
}
nav ol li a{　　a要素は
　　display:block;　　ブロック
　　width:100%;　　　幅と高さは親参照
　　height:100%;
}
nav ol li:hover ol{　　liにマウスが乗ると
　　display:block;　　表示
}

nav ol li ol:target{　　リンクされた目標は
　　display:block;
}

この回答へのお礼

ありがとうございます

お礼日時：2016/11/11 02:13

No.1 回答者： ORUKA1951 回答日時： 2016/11/05 14:07

デザインのためにHTMLを書いてはなりません。

あくまでHTMLは、文書構造だけ。
とりあえず、firefoxかIEで
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
をご覧ください。
　ブラウザのメニューバーの[表示]から、[スタイル(シート)]に進み、任意のスタイルを選択してごらんなさい。
　HTMLは、一つですが、スタイルシートで自由に変更できます。ちなみに、印刷プレビューで印刷状態を確認したり、ウィンド幅を変えたり、スタイルを全くなくして（検索エンジンが理解する姿）も確認するとよいでしょう。

　基本的には二階層のナビゲーションリストを作成して、スタイルシートで、好きな形にデザインすればよい。何よりもメンテナンスが容易になる（HTMLソースを参照）し、後で、あるいはスマホや携帯電話用、印刷用の別デザインを設定もできる。

この回答へのお礼

ありがとうございます

お礼日時：2016/11/11 02:13