关于jquery垂直导航菜单的建议

我正在为我的网站制作一个垂直导航栏。。。不幸的是没有达到我想要的，所以希望我能得到一些解决方案

垂直菜单包含类别列表。。。使用以下jquery将每个类别的子类别追加到后面 这是代码

<div id="nav_menu">
<div id="menu_box">
<ul id="menu_ul">
<li ><a href="#" id="1" >Category1</a></li>
<li ><a href="#" id="1" >Category1</a></li>
<li ><a href="#" id="1" >Category1</a></li>
etc....
</ul>
</div>

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>

当我按照我的布局要求改变布局时，它在这里工作得很好

<div class="container nav_menu">
<div class="sidebar menu_box">
<ul class="menu_ul">
</ul>
</div>
</div> 

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>

jquery功能不起作用它没有将html内容附加到菜单滑块子菜单中…我在jquery中将它们更改为类选择器…一个问题

第二个是…我希望菜单是这样的，请看图片，并建议我如何实现这一点。这种菜单可以在所有的购物网站上看到，所以我正在努力让它工作…请找到所附的图片

请参阅附件。 图1在主页上，默认情况下，它应该显示所有类别，但在其他页面上，它应该关闭，并应在悬停效果上工作，如图所示

图2我迄今为止取得的成就

---

这些链接无法公开访问。@ChrisHerbert:请现在检查一下，我又附加了图像…有人能帮我吗？有什么想法吗！

        $(".category").live('mouseover',function(event){
        $("#menu_slider").show();
        var D=$(this).html();
        var id=$(this).attr('id');

        var V=$("#hide"+id).html();
        $("#submenu_ul").html(V);
        $("#menu_slider h3").html(D);   
});
    //Document Click
    $(document).mouseup(function()
    {
     //$("#menu_slider").hide();

    });

    //Mouse click on sub menu
    $("#menu_slider").mouseup(function()
    {
    return false
    });

    //Mouse click on my account link
    $("#menu_box").mouseup(function()
    {
    return false
    });

<div class="container nav_menu">
<div class="sidebar menu_box">
<ul class="menu_ul">
</ul>
</div>
</div> 

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>