JQuery UI, help improving code.

Question

I have the following.

<ul class="sortable">
  <li>
    Some Title
    <ul class="sortable"></ul>
  </li>
  <li>
    Some Title
    <ul class="sortable"></ul>
  </li>
</ul>

I then use the following JavaScript to make items sortable.

$(function() {
 $(".sortable").sortable({revert: true, connectWith: ['.sortable ul']});
 $('.sortable ul').sortable( {connectWith: ['.sortable']} );
 $(".sortable, li").disableSelection();
});

This works, it works really well sorting top level li's, putting a top level li inside of li > ul is difficult. Ordering with li > ul is impossible.

What happens currently is that as a draggable li moves over li > ul. The ul expands in preparation to take it. Is it possible to modify what I have so when you move one li over another, the li > ul grows?