IDごとに個別のDIVを表示させる方法

質問

http://www.skyrocketlabs.com/articles/jdiv-a-jquery-navigation-menu-alternative.php

こちらのチュートリアルにあるドロップダウン式のナビを勉強のために作っております。
デモ版は1つの行でつくられているのですが、こちらのチュートリアルを応用し、同じようなナビを何行も続けて縦に重ねていく形を作りたいのです。
この場合、提供されているサンプルをどのようにいじればよいでしょうか？

デモ内では
<li><a href="#" id="menu1">Rollover me!</a></li>
ここにマウスを載せると
<div id="hidden-div">
が表示される形になっていると思うのですが、

例えばこれを、
<li><a href="#" id="menu1">Rollover me!</a></li>
.....<div id="hidden-div1">

<li><a href="#" id="menu2">Rollover me!</a></li>
.....<div id="hidden-div2">

<li><a href="#" id="menu3">Rollover me!</a></li>
.....<div id="hidden-div3">

menu（数字）ごとに、その下の個別の<div id="hidden-div（数字）">を出したいのです。

未だ知識が浅いため、いろいろいじくってはいるのですが、どうにも解決できません。
どなたかご教授お願いします。

回答No.1

my-- · ベストアンサー

「デモと同じ要領で追加していきなさい」てことみたいですね。

//jDiv.js
var hide2 = false;
$("#menu2").hover(function(){
if (hide2) clearTimeout(hide2);
$("#hidden-div2").fadeIn();
// The main nav menu item is assigned the 'active' CSS class
$(this).addClass("active");
}, function() {
// Fades out the DIV and removes the 'active' class from the main nav menu item
hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
$("#menu2").removeClass("active");
});
// Ensures the DIV displays when your mouse moves away from the main nav menu item
$("#hidden-div2").hover(function(){
if (hide2) clearTimeout(hide2);
$("#menu2").addClass("active");
}, function() {
// If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
$("#menu2").removeClass("active");
});

/* style.css */
#hidden-div2 {
position: absolute;
width: 900px;
height: 240px;
margin: -1px 0 0 0;
padding: 30px;
background: #333;
display: none;
z-index: 100;
}

<!-- BEGIN MAIN NAV MENU-->
<div id="menu">
<ul>
<li><a href="#" id="menu1">Rollover me!</a></li>
<li><a href="#" id="menu2">Link # 2</a></li>
<li><a href="#">Link # 3</a></li>
</ul>
</div>
<!-- END MAIN NAV MENU-->

<!-- BEGIN HIDDEN DIV -->
<div id="hidden-div">
<div id="hidden-div-left">
<h4>This is the hidden panel that can display any content you wish.<br/><br/>Perhaps you would like a description here and your section's links to the right.</h4>
</div>

<div id="hidden-div-right">
<ul class="submenu">
<li><a href="#"> List item #1</a></li>
<li><a href="#"> List item #2</a></li>
<li><a href="#"> List item #3</a></li>
<li><a href="#"> List item #4</a></li>
<li><a href="#"> List item #5</a></li>
</ul>
</div>
</div>
<!-- END HIDDEN DIV -->

<!-- BEGIN HIDDEN DIV2 -->
<div id="hidden-div2">
<div id="hidden-div-left">
<h4>This is the hidden panel that can display any content you wish.<br/><br/>Perhaps you would like a description here and your section's links to the right.</h4>
</div>

<div id="hidden-div-right">
<ul class="submenu">
<li><a href="#"> List2 item #1</a></li>
<li><a href="#"> List2 item #2</a></li>
<li><a href="#"> List2 item #3</a></li>
<li><a href="#"> List2 item #4</a></li>
<li><a href="#"> List2 item #5</a></li>
</ul>
</div>
</div>
<!-- END HIDDEN DIV2 -->

お礼

お返事が遅くなり申し訳ございません。
非常に参考になるものを頂き、ありがとうございます。
番号付けすればよかったのですね・・・
おかげさまで無事、理想的な形にできました。