<script type="text/javascript">

$.fn.tree_menu = function() {

        var nav = this;
        var uls = nav.find("ul");
        var ulsL = uls.length-1;


        nav.find("a").click(function() {
            var Lnk=$(this).attr("href");
            var self = $(this).next();
            if ( self.length == 0 ) return;


            var showedElems = [];
            uls.each(function( index ){

                    if ( this === self[0] ) {
                        if ( self.css('display') == "none" ) {
                           showedElems.push(index);$(this).prev('a').addClass('active');
                        }  else $(this).prev('a').removeClass('active');
                        $( this ).slideToggle(400);return true;
                    } 
                    if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
                        $(this).prev('a').removeClass('active');
                        $(this).slideUp(400);return true;
                    }
                    showedElems.push(index);
           });

                return false;

        });
}
</script>

<table cellspacing="0" cellpadding="0" border="0" style="height: 335px;">
<tr>
    <td align="center" valign="top">
<ul id="nav_menu_content">
    <li><a href="#0" class="cat_link">Категория 1</a>
    <ul  style="display:block">Тут содержимое первой категории</ul>    
    </li>
    <li><a href="#0" class="cat_link">Категория 2</a>
    <ul>Тут содержимое второй категории</ul>    
    </li>
    <li><a href="#0" class="cat_link">Категория 3</a>
    <ul>Тут содержимое третьей категории</ul>    
    </li>
</ul>   
	</td>
</tr>
</table>
<script>$('#nav_menu_content').tree_menu();</script> <!-- Запуск -->

<!-- Стиль меню-шармошки --><style>
#nav_menu_content * {
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
padding: 0!important;
    }

 #nav_menu_content {
        list-style: none;
        display:inline:block;
        width:250px;
height: 330px;
border: 1px solid transparent!important;

    }

    #nav_menu_content li {
        list-style: none;
margin: 3px 0 3px;
        background-color: #E0EDED;
        font-size:120%;
border: 1px solid transparent!important;
    }

#nav_menu_content li .cat_link {
display: block;
height: 30px;
line-height: 28px;
width: 99%;
border: 1px solid green;
text-decoration: none;
}

#nav_menu_content li ul {
        list-style-position: outside;
        text-align:left;
        list-style: none;
        display: none;
border: 1px solid green;
height: 210px;
width: 99%;
margin-top: 3px;
    }

#nav_menu_content a:hover, #nav_menu_content a:active, #nav_menu_content a:visited {
text-decoration: none;
       -moz-user-select: none;
       -khtml-user-select: none;
       user-select: none;
</style>
<!-- END Стиль меню-шармошки -->
<!-- Скрипт меню гармошки -->
<script type="text/javascript">

$.fn.tree_menu = function() {

        var nav = this;
        var uls = nav.find("ul");
        var ulsL = uls.length-1;


        nav.find("a").click(function() {
            var Lnk=$(this).attr("href");
            var self = $(this).next();
            if ( self.length == 0 ) return;


            uls.each(function( index ){

                    if ( this === self[0] ) {
                        if ( self.css('display') == "none" ) {
                           $(this).prev('a').addClass('active');
                        }  else {
                                $(this).prev('a').removeClass('active');$(this).slideUp(400);
                                 uls.eq(index-1).prev('a').click();return  false;
                                }
                        $( this ).slideDown(400);return true;
                    } 
                    if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
                        $(this).prev('a').removeClass('active');
                        $(this).slideUp(400);return true;
                    }
           });

                return false;

        });
}
</script>
<!-- END Скрипт меню гармошки -->

<table cellspacing="0" cellpadding="0" border="0" style="height: 335px;">
<tr>
    <td align="center" valign="top">
<ul id="nav_menu_content">
    <li><a href="#0" class="cat_link">Категория 1</a>
    <ul style="display:block">Тут содержимое первой категории</ul>    
    </li>

    <li><a href="#0" class="cat_link">Категория 2</a>
    <ul>Тут содержимое второй категории</ul>    
    </li>
    <li><a href="#0" class="cat_link">Категория 3</a>
    <ul>Тут содержимое третьей категории</ul>    
    </li>

</ul>   
	</td>
</tr>
</table><script>$('#nav_menu_content').tree_menu();</script> <!-- Запуск -->