Transitions with height: auto

dabblet.css

/**
 *  Transitions with height: auto
 */
html {
	font-size: 16px;
}
#main-nav {
	-webkit-transition: max-height 2s ease-in-out;
	max-height: 2em;
	overflow: hidden;
}
#main-nav.expanded {
	max-height: none;
}

dabblet.html

<nav id="main-nav">
	<ul class="main">
		<li>This</li>
		<li>Right</li>
		<li>Here Is</li>
		<li>A Bunch Of</li>
		<li>List</li>
		<li>Items</li>
		<li>That</li>
		<li>Will</li>
		<li>Serve As An</li>
		<li>Example Of</li>
		<li>Our</li>
		<li>Main</li>
		<li>Navigation</li>
		<li>Menu</li>
	</ul>
</nav>
<a href="#main-nav" data-classtoggle-class="expanded">Test</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://raw.github.com/abitgone/jQuery-Plugins/master/ClassToggle/abitgone-classtoggle.js"></script>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}