List with only one item with dot next to it?

[AppDevGuy]

The best way to described what I want to do in HTML is by example: In Firefox you can click
View | Character Encoding | Auto-Detect

That brings up a side list of several items. Only one of those items has a solid dot next to it that shows it is the selected item. I want to know how do the same thing with HTML, CSS, and Javascript.

It is easy enough to pop up lists. The problem comes from having only one item with a style and other items with other styles. I've coded up a bunch of li items I've also tried it with div and
display: list-item;
list-style-type:disc;
in one CSS entry (called itemselected) and then another CSS entry with
display: list-item;
list-style-type:none;
called itemnotselected in all the other items. I use Javascript click events to change which item has the class="itemselected" and make all the other items have class="itemnotselected".

I've also tried showing the dot with
list-style-image: url(images/dot.gif) ! important;

My problems are with:
- getting the dot onto the left of the text description of a single item,
- align the dot vertically with the text description,
- get all other row text descriptions aligned the same vertically.

I've tried dozens of variations that fail in various ways. I'm hoping someone knows a way that works for this problem.

[bluewalrus]

You got a link or code?