Remove bullets add tick not working - html

Question

I am trying to remove some bullets points, and replace them with ticks. I can make it work, but then my menu bar mess up. So I need to add a class to the <ul>, so it is not affecting anything else.
I tried to add a class, but still not working. Why?
Not working: Not working
Working but mess up my menu bar: Working
HTML:
<ul class="removeBulletAddTick">
<li class="removeBulletAddTick"> Test text 1</li>
<li class="removeBulletAddTick">Test text 2</li>
<li class="removeBulletAddTick">Test text 3</li>
</ul>
CSS:
ul removeBulletAddTick{
list-style: none;
}
ul li:before {
content: '✓';
}
Update
When I do your suggestion my menubar messed around:
Screenshot of menubar

Answer 1

As it turned out, the class selector wasn't declared correctly, it was missing the period (.) and should be .removeBulletAddTick.
The code below demonstrates this, you'll notice the class in question added to the list item rules as well for more specificity - this is to ensure that these rules will only apply to the list items you intend them to; which are those with the classes .removeBulletAddTick.
ul .removeBulletAddTick {
list-style: none;
}
ul li.removeBulletAddTick:before {
content: '✓';
}
Updated JSFiddle
You don't even need to declare that class on every list item. It would be better to declare it on the containing parent element, as follows:
ul.removeBulletAddTick {
list-style: none;
}
ul.removeBulletAddTick li:before {
content: '✓';
}
Code Snippet Demonstration:
ul.removeBulletAddTick {
list-style: none;
}
ul.removeBulletAddTick li:before {
content: '✓';
}
<ul class="removeBulletAddTick">
<li>Test text 1</li>
<li>Test text 2</li>
<li>Test text 3</li>
</ul>