[surferboy]

I am tyring to create what looks like an unordered list in my html document. Essentially, I am taking a MS word document that has step-by-step instructions on how to do something. Each step is its own bullet and some bullets have sub-bullets. Additionally next to some of the bullets will be thumbnails with links to pictures (floating on the right). I can either do a blockquote of the text and just paste it into the html document or I can cut and paste each bullet point as a list item.

I read somewhere that blockquotes are not a good idea. My question is: what is the best way to create a list with bullets and sub-bullets and retain the ability to throw pictures next to certain bullet points?

I am using pure css for formatting. Any advice is appreciated. If anyone has any examples of what I am trying to describe above, I would love to see them.

[Synotic]

Code:
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<ul>
		<li>Sub-item 1</li>
		<li>Sub-item 2</li>
	</ul>
	<li>Item 3</li>
	<li>Item 4 <a href="big.gif"><img src="thumb.gif" /></a></li>
	<li>Item 5</li>
</li>

Is that what you're thinking of?...

[larkost]

Synotic has the best answer, but just for diversity you can also use something like this:

Code:
<dl>
	<dt>your title</dt>
	<dd>some text</dd>

	<dt>the next title</dt>
	<dd><dl>
		<dt>a sub title</dt>
		<dd>and the sub-text</dd>
	</dl></dd>
</dl>

You can mix and match these structure together, so when you want the indenting without the bullet points the definition-list method is very nice. It also has the nice point of being a very old tag (so all browsers respect it) and being friendly to screen readers (visual impaired readers).