List Style Type None not working

Question

When I was building my site, I typed the following codes. However, the List Style Type None None code didn't remove the dot/bullet before every item. I've tried !important and failed. Could anyone tell me why?

.naviMenu 
{
  list-style-type: none !important;
}`

<div class="naviMenu">
    <ul>
		<div id="homePage"><li>Home</li></div>
		<li>About</li>
		<li>Text</li>
		<li>Photo</li>
		<li>Special Project</li>
		<li>Contact</li>
	</ul>
</div>

Answer 1

The reason your CSS is not working is because the list-style-type property must be attached to a display: list-item element such as li or ul. (As @andrewli stated you're targeting the wrong element).

You can do this like so

.naviMenu > ul li { // notice how I have targeted the li element(s) rather than the whole parent container
    list-style-type: none; // also, there is no need for !important 
}

Just as a little side note

This line of markup:

<ul>
    <div id="homePage"><li>Home</li></div>
    <!-- e.t.c. !-->
</ul>

Contains incorrect syntax. It should be done like so:

<ul>
    <li><div id="homePage">Home</div></li>
    <!-- e.t.c. !-->
</ul>

Hope this helps! :-)

Answer 2

try this

.naviMenu ul li{
    list-style-type:none;
}