Frage zur Navigation

[Elbenhexe]

Also ich entschuldige mich schonmal für meine Anfängerfrage aber ich komme bei dem Problem einfach nicht weiter.

Ich hab mir ein Menü für meine Website gebastelt (diese basiert auf dem Joomla CMS System)

Code:

a.mainlevel  {
  display           : block;
  width             : auto;
  margin            : 1px 0;
  padding          : 0;
  font-size         : 12px;
  background      : none;
  text-indent      : 10px;
  width             : 160px;
}

a.mainlevel:link, a.mainlevel:visited {
  background          : transparent url(images/list-off.gif) left center no-repeat;
  padding-left        : 15px;
  text-align          : left;
  font                : normal 12px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
  text-decoration     : none;
  color               : #999;
}

a.mainlevel:hover {
  border              : 0px solid;
  background          : #C5C5C5 url(images/list-on.gif) left center no-repeat;
  color               : black;
}

#active_menu {
  padding-top      : 2px;
  padding-bottom   : 2px;
  border           : 0px solid;
  color            : #666;
  background       : #C5C5C5 url(images/list-active.gif)
  left center no-repeat;

}

Nun möchte ich aber das bei meinem Menü solche "squares" vorm Menüpunkt erscheinen. Das soll so aussehen wie bei diesem Menü

http://css.maxdesign.com.au/listamatic/vertical11.htm

Ich komme da aber überhaupt nicht mehr weiter weil bisher alle Versuche gescheitert sind (hab es auch schon mit "list-style-image" versucht...) Vermutlich ist das nur ein Denkfehler aber wäre toll wenn ihr mir helfen könntet.

Danke schonmal!

Elbenhexe