How would you get the bullets back, without using a background-image (list-style-image)? Bullets are "list-style-type; A "horizontally display" UL list, is "display:inline;" and the default for this IS "list-style-type:none;". This is to eliminate confusion in a society that reads left-to-right, lest user thinks that the " * " is a "LI" itself. But you can 'force' it back, if you need to, by explicitly stating the list-style-type:value;
But to create the visual of this without "list-style-type;value;", use a "background-image" on the LIs. This is actually okay and good, because background-image is presentational and therefore, can be entirely handled by the CSS.
A 20px by 20px "<img>" of the asterisk " * " positioned would suffice. You could use a 'site logo' for the "<img>" too. I have done this, like, for a site about ferrets; I used my 'user avatar' image as "bullets" for LIs.
Something like:li {background:url(asteriskImage.jpg) 0;....}whereby "asterisk.jpg" is the 20px x 20px " * " IMAGE, and " 0 " is position-left:0; (the default unstated position-top; is always "center").
Keep in mind now, that this 20-px wide "image" will be covered-over by whatever 'text' or 'content' appears IN the LI, so you want to "padding-left:30px;" in the LI, to give a 10px "gap" between the " * " and the text... so:
li {background:url(asteriskImage.jpg) 0; padding-left: 20px; }.... would be your code.
When using an IMG for background-image:url() on LIs, you can make the width/height be whatever size you want. I just chose 20px x 20px for the sake of the asterisk image. A typical 'line-height' (height & width of scrollbar, etc) is 20px.
Still with me here? If you have problems, post back & I can whip something up and show code. :)
KDLA's suggestion to float:left; width set width is also good
'lists' are a LOT of fun to do! :D So many ways to do stuff, so many variations!