I have an outer list with no bullets, but for the inner list I would like bullets. I can see the style is being applied via the correct selector when viewing CSS in Chrome, however no bullet is displayed.

Any ideas what I am doing wrong? Also how could I get it working with a graphic as again the list-style-image property also does not work.

Code is below, many thanks in advance.

http://jsfiddle.net/7wCsa/

Code:
<style type="text/css">

*{
	margin:0;
	padding:0;
}

ul.products {
padding: 0;
margin: 0;
}


ul.products li {
width: 238px;
display: inline-block;
margin-bottom: 30px;
float: left;
position: relative;
}

ul.products li:nth-child(odd) {
margin-right: 30px;
}

ul.products li ul {
border: none;
margin: 0;
padding: 0;
float: none;
margin-bottom: 30px;

}

ul.products li ul li {
border: none;
height: auto;
margin: 0;
padding: 0;
list-style: square;
float: none;
line-height: 10px;
}


</style>
</head>

<body>

<ul class="products">
	<li>
		<h1>Title 1</h1>
		<ul>
			<li>feature a</li>
			<li>feature b</li>
			<li>feature c</li>
		</ul>
	</li>
	<li>
		<h1>Title 2</h1>
		<ul>
			<li>feature a</li>
			<li>feature b</li>
			<li>feature c</li>
		</ul>
	</li>

</ul>