jquery mobile nested list

by ihope

HTML

<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/css/themes/default/jquery.mobile-1.2.0.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Listviews</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
<div data-role="header" data-theme="f">
		<h1>List formatting</h1>
</div>
<ul data-role="listview" >
	<li><a href="#" data-transition="slide">Acura</a>
       <ul data-role="listview"   data-filter="true">
            <li data-theme="b" data-icon="back">
                <a href="#"    data-rel="back">Back</a>
            </li>
            <li>Acura 1</li>
            <li><a href="bmw.html">Acura 2</a></li>
        </ul>
    </li>
	<li><a href="audi.html">Audi</a></li>
	<li><a href="bmw.html">BMW</a></li>
</ul>
        </div>  </div>
        </div>