How can I hide these dots

It's because

.item-list UL LI {
 ...
 list-style-type: disc;
 ...
}

is defined in system.css

Did you put the list-style-type in the ul or li?

It should be: (afaik)

ul{ 
  list-style-type: none;
}

Other than that I used this before:

li{
  background-image: url(); /*or link to a blank image*/
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 12px;
}

It's probably not the best way, but it gets the job done :)

Additionally try this too:

li.class, li.collapsed, li.expanded {
  list-style-image: none;
  list-style: none;
  list-style-type: none;
}
ul {
  list-style-image: none;
  list-style: none;
  list-style-type: none;
}

You can always add classes to your elements:

<ul class="hidden">
  <li>Bar</li>
  <li>Foo</li>
  <li>Bar Foo</li>
</ul>

Try this:

.hidden {
 list-style-type: none;
}

.hidden {
 list-style-type: none;
}

<h3>A simple UL</h3>
<ul>
  <li>Bar</li>
  <li>Foo</li>
  <li>Bar Foo</li>
</ul>

<h3>A hidden one</h3>
<ul class="hidden">
  <li>Bar</li>
  <li>Foo</li>
  <li>Bar Foo</li>
</ul>