ポップアップメニューを表のように表示させたい

質問

ポップアップメニューを作成しているのですが、縦１列や横１列にメニューを出したり、縦にでてさらに次の階層までのメニューは、検索するとサンプルがあるのですが、縦６列、横４行の表のようなものをポップアップメニューで表示させたいと思っています。
サンプルになるページがあればと思って検索しましたが見つかりませんでした。
このようなことはできないでしょうか。

参考になるページを変更してみたりしてのですがCSSファイルの修正がうまくできず動作しなくなったりします。参考にしたページはこちらです。
http://www.coolwebwindow.com/csstips/csstechnic/000254.php

この参考にしたページの内容に関係なくどういう形でもよいのでご教授お願いします。

回答No.2

ORUKA1951

＞「全ての製品」をクリックすると下記のような表がポップアップで表示されるようにしたいと思っています。
　言葉通りの動作をさせるなら、javascriptを使用するべきでしょう。
　スタイルシートには、onClickに対応する動作はありません。もしスタイルシートで行うなら、:hover(ポインターをあわせると)で、メニューが表示されるか方式でしょう。
　クリックして表示させるには、あらかじめ表示領域を確保しておいて、何らかの画像なりを表示させてクリックするとページ内アンカーで表示部を移動させることになります。
<nav>
　<ol>
　　<li>トップ</li>
　　<li>新製品
　　　<ol>
　　　　<li></li>
　　　</ol>
　　</li>
　　<li id="product">製品情報
　　　<ol>
　　　　<li><a href="">製品１</a>
　　　　　<ol>
　　　　　　<li><a href="">特徴</a></li>
　　　　　　<li><a href="">詳細</a></li>
　　　　　　<li><a href="">機能一覧</a></li>
　　　　　</ol>
　　　　</li>
　　　　<li><a href="">製品２</a>
　　　　　<ol>
　　　　　　<li><a href="">特徴</a></li>
　　　　　　<li><a href="">詳細</a></li>
　　　　　　<li><a href="">機能一覧</a></li>
　　　　　</ol>
　　　　</li>
　　　　<li><a href="">製品３</a>
　　　　　<ol>
　　　　　　<li><a href="">特徴</a></li>
　　　　　　<li><a href="">詳細</a></li>
　　　　　　<li><a href="">機能一覧</a></li>
　　　　　</ol>
　　　　</li>
　　　</ol>
　　</li>
　　<li>略</li>
　</div>
</nav>
として、navを縦・横を決めて配置してoverflow:hiddenで他の部分を隠します。#productが選択(クリック)されると、内容がスクロールされて、同じページに現れる。

回答No.1

ORUKA1951

デザインのために、HTMLを探そうとするから失敗するのです。
　そもそも、表のように並べたいということは、文書の意味的な構造も表的なものだと思います。あるいは、単なる階層をもつリストであったとしても、表のようにプレゼンテーションしたほうがわかりやすい構成だと思います。
　まず、どのような文書構造なのかを率直にマークアップしてください。--プレゼンテーションは考えないくらいのつもりで。
<nav>
　<ol>
　　<li><a href="">製品１</a>
　　　<ol>
　　　　<li><a href="">特徴</a></li>
　　　　<li><a href="">詳細</a></li>
　　　　<li><a href="">機能一覧</a></li>
　　　</ol>
　　</li>
　　<li><a href="">製品２</a>
　　　<ol>
　　　　<li><a href="">特徴</a></li>
　　　　<li><a href="">詳細</a></li>
　　　　<li><a href="">機能一覧</a></li>
　　　</ol>
　　</li>
　　<li><a href="">製品３</a>
　　　<ol>
　　　　<li><a href="">特徴</a></li>
　　　　<li><a href="">詳細</a></li>
　　　　<li><a href="">機能一覧</a></li>
　　　</ol>
　　</li>
　</ol>
</nav>
★HTML4.01だったら、<div class="nav"></div>ですかね。

　だとしたら、各項目にほぼ同数の項目からなるリストがあり、それらの順番が意味を持つ(一行目は特徴、二列目は詳細・・・)ですから、序列リストでマークアップしておきます。
　これを、表的なポップアップメニューにすることは容易ですね。もちろん、縦並びのポップアップにも、横並びのプルダウン、あるいは、メニュー詳細は大きな枠中にその製品の写真の上に表示するなど・・・どのようにもデザインできます。

　まず、率直にHTMLをお書きなさい。それをどのようにプレゼンテーションしたいかを、質問されると良いでしょう。
　HTML5を目前に控えた現在、この文書構造とプレゼンテーションの分離はとても重要な基本です。ただ、以前よりずっと楽になることも事実です、頑張ってください。

お礼

早速のご回答有難うございます。
イメージとしましては、メニューにある「全ての製品」をクリックすると下記のような表がポップアップで表示されるようにしたいと思っています。
できればCSSで定義できないかと思っています。

　全ての製品

　　　　製品１　特徴 　詳細　機能一覧　その他
　　　　製品２　特徴 　詳細　機能一覧　その他
　　　　製品３　特徴 　詳細　機能一覧　その他