<style>
.ul-menu * {
        margin: 0;
        padding:  0;
        margin: 0;
        padding:  0;
        font-size: 12px;
        font-family: 'Times New Roman';
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
 .ul-menu {
        float:left; /*строку можно убрать, если слайдер единственный*/
        list-style: none;
        display:inline:block;
        width:250px;
        height: 500px;
        border: 2px solid transparent!important;
 
    }
 
    .ul-menu li {
        list-style: none;
        margin: 3px 0 3px;
        background-color: #E0EDED;
        font-size:120%;
    }
 
.ul-menu li .cat_lnk {
        background:transparent url(http://s3.uploads.ru/ue5ph.gif) no-repeat 0 0;
        text-align: center;
        padding: 6px;
        display: block;
        height: 28px;
        line-height: 28px;
        width: 96%;
        text-decoration: none;
 
}
.ul-menu li ul {
        list-style-position: outside;
        text-align:left;
        list-style: none;
        display: none;
        height: 210px;
        width: 94%;
        margin-top: 1px;
        padding: 6px;
}
.ul-menu li .cat_lnk+ul {
        border: 1px solid green;
        border-top-color:#A5B7B7;
}
a.cat_lnk:hover,a.cat_lnk:active,a.cat_lnk:visited {
        text-decoration: none;
}
.ul-menu li a.cat_lnk.active{
        background-position: 0 -44px;
}
.ul-menu li a.cat_lnk:hover{
        background-position: 0 -88px;
}
</style>
<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>

<!--  Спойлер  -->
<ul id="nav_menu_content1" class="ul-menu">
    <li><a href="#0" class="cat_lnk">Фото 4</a>
    <ul>Тут содержимое третьей категории</ul>    
    </li>
    <li><a href="#0" class="cat_lnk">Категория 3</a>
    <ul>Тут содержимое третьей категории</ul>    
    </li>
    <li><a href="#0" class="cat_lnk">Категория 2</a>
    <ul>Тут содержимое второй категории</ul>    
    </li>
    <li><a href="#0" class="cat_lnk active">Категория 1</a>
    <ul  style="display:block">Тут содержимое первой категории</ul>    
    </li>
<li><a href="#0" class="cat_lnk">Категория 5</a>
    <ul>Тут содержимое четвертой категории</ul>    
    </li>
<li><a href="#0" class="cat_lnk">Категория 6</a>
    <ul>Тут содержимое четвертой категории</ul>    
    </li>
</ul> <script>$('#nav_menu_content1').tree_menu();</script> <!-- Запуск -->