Jquery ui nested sortable list

by bizamajig

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ul class="nav">
	<li>Web Development</li>
	<ul class="subnav">
		<li>PHP Jobs</li>
		<li>OSCommerce projects</li>
	</ul>
	<li>Content Creation</li>
	<ul class="subnav">
		<li>Technical Writing Jobs</li>
		<li>Forum Posting</li>
	</ul>
	<li>Design and Artwork</li>
	<ul class="subnav">
		<li>Blog Design Projects</li>
		<li>Freelance Website Design</li>
	</ul>
	<li>Sales and Marketing</li>
	<ul class="subnav">
		<li>Internet Marketing Consulting</li>
		<li>Leads Generation Services</li>
	</ul>
	<li>Test</li>
	<ul class="subnav"></ul>
</ul>

CSS

.subnav {
    background-color:orange;
    min-height:10px;
    width:400px;
}

JavaScript

$(function  () {
  $('ul.nav').sortable({
  	connectWith: '.subnav',
  });
  $('ul.subnav').sortable({
  	connectWith: '.nav',
  });
})