从头开始在jquery中创建一个dropline菜单

Question

这让我疯了！我想在jquery中使用“当前”下拉线严格制作一个单层向下的下拉菜单。 “.sub”div设置为在css中显示：none。这是我的jquery代码：

$("#main ul li .sub a.current").parent(".sub").show();

$("#main ul li").hover(function () {
    $("#main ul li .sub a.current").parent(".sub").hide();
    $(this).children("a").stop().animate({color: "#ffd700", backgroundColor: "#494949"}, 300);
    $(this).find(".sub").stop().fadeIn(300);
}, function () {
    $("#main ul li .sub a.current").parent(".sub").show();
    $(this).children("a").stop().animate({color: "#fff", backgroundColor: "transparent"}, 300);
    $(this).find(".sub").stop().fadeOut(300);
});

这是我的页码：

<div id="main"><ul>
<li id="one" class="top current"><a>main01</a>
    <div class="sub">
    <a class="off" href="#">sub01 of main01</a>
    <a class="current" href="#">sub02 of main01</a>
    <a class="off" href="#">sub03 of main01</a>
    </div>
</li>
<li id="two" class="top"><a href="#">main02</a></li>
<li id="three" class="top"><a>main03</a>
    <div class="sub">
    <a class="off" href="#">sub 01 of main03</a>
    <a class="off" href="#">sub 02 of main03</a>
    </div>
</li>
<li id="four" class="top"><a>main04</a>
    <div class="sub">
    <a class="off" href="#" target="_blank">sub 01 of main04</a>
    <a class="off" href="#" target="_blank">sub 02 of main04</a>
    <a class="off" href="#" target="_blank">sub 03 of main04</a>
    </div>
</li>
<li id="five" class="top"><a>main05</a>
    <div class="sub">
    <a class="off" href="#">sub 01 of main05</a>
    <a class="off" href="#">sub 01 of main05</a>
    </div>
</li>
</ul></div>

请帮助一个顽固的半新手......