No bullets for outer list, bullets for inner list

HTML & CSS
1

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.

<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>
2

Two things about the bullets:

(1) The universal selector is NOT your best friend. The list items must have padding-left in which to display the markers or images. It’s better to target the selectors that need margins and padding zeroed. So, delete the asterisk and styles at the top of the page.


[color=red]* {
    margin:0;
    padding:0;
}[/color]

(2) display:inline-block expects to be part of an inline menu and therefore disable markers. You can stop the inheritance of inline-block by applying the first child selector.


ul.products [color=blue]>[/color] li {

(3) Back on the subject of padding, delete


ul.products li ul {[color=red]padding:0;[/color]}

See if that helps :slight_smile: