I highly recommend to use background image for the list items. as list-type doesn't work in most cases.
here is an example: (this is an example for two level list item)
HTML
<ul class="my_list">
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four
<ul>
<li>list item four_one</li>
<li>list item four_two</li>
<li>list item four_three</li>
</ul>
</li>
</ul>
CSS file :
ul.my_list {
margin: 0;
padding: 0;
list-style: none; /* get rid out of dots etc. */
}
ul.my_list li { /* targeting the list items(LI) in the ul.my_list. Use your own graphic file as a list item graphic. */
background: url(images/your_graphic.png) left top no-repeat;
}
ul.my_list li ul li { /* This is for the second level list item. that should have a different graphic */
background: url(images/your_graphic_2.png) left top no-repeat;
}
by doing this, you will have your own list item graphics for both 1st and 2nd level list items.
If this is for navigation; its always good to shift sub level list items inwards:
ul.my_list li ul li {
background: url(images/your_graphic_2.png) left top no-repeat;
padding: 0 0 0 10px;
}
so the users can see that main navigation consists of :
list item one
list item two
list item three
list item four
list item_four_one
list item_four_two
list item_four_three
Let me know if there is any probs.