jquery - jqueryを使用して、内部に絶対配置コンテンツを含む相対配置コンテナを動的に拡張する

Question

UL の内部は絶対に配置され、FadedIn と FadedOut であるため、相対的に配置されたコンテナー div を Jquery で動的に拡張しようとしています。UL にはさまざまな数の LI が含まれているため、すべての UL の高さが異なるため、全体が動的である必要があります。

ここに私のHTMLコードがあります

<div id="container">
<nav id="type-navigation">
<ul id="nav_categories" class="subs">
    <li><a href="#">Category 1</a>
            <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            </ul>
    </li>
    <li><a href="#">Category 2</a>
            <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
            <li><a href="#">Link5</a></li>
            </ul>
    </li>
</ul>
</nav>

そして、ここに私のjQueryがあります

$("#type-navigation #nav_categories > li > a").click(function(event){           
      event.preventDefault();
});

$(".subs > li > a").click(function() {
$(this).parents('.subs').find('ul').hide();
if($(this).next("ul").is(":visible")) {
    $(this).next("ul").fadeOut("slow");
} else {
    $(this).next("ul").fadeIn("slow");
}
return false;
});

これは上記の要素の CSS です。

#container {
overflow: hidden;
padding: 20px 0 !important;
background: none;}
#type-navigation ul ul{
position: absolute;
top:0;
right: 20px;
}

#type-navigation > ul > li > ul {
 display:none;   
}​