transition using width or height auto

dabblet.css

/**
 * transition using width or height auto
 */
ul,li {
	display: block;
	margin: 0;
	padding: 0;
	width: 250px;
}
li {
	border-bottom: 1px solid lightgrey;
}
li > ul {
	max-height: 0;
	overflow: hidden;
	text-indent: .5em;
	transition: max-height 1s;
}
li:hover > ul {
	max-height: 1000px;
}

dabblet.html

<ul>
	<li>item
		<ul>
			<li>sub-item</li>
			<li>sub-item</li>
		</ul>
	</li>
	<li>item
		<ul>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
		</ul>
	</li>
	<li>item
		<ul>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
		</ul>
	</li>
	<li>item
		<ul>
			<li>sub-item</li>
			<li>sub-item</li>
		</ul>
	</li>
	<li>item
		<ul>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
		</ul>
	</li>
	<li>item
		<ul>
			<li>sub-item</li>
			<li>sub-item</li>
			<li>sub-item</li>
		</ul>
	</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

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