ul li css not working properly - html

Question

Got a strange issue:
In my .cshtml I have a second thing:
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
Which supposed to work like this:
Test
Test2
Test3
Test4
Test5
Test6
BUT instead of it, it works this way:
Test
Test2
Test3
Test4
Test5
Test6
The only thing I have in css for this is list-style: none;
Also main <ul> is placed inside of <div> which have text-align: left; (without it, all items are centered).
I am a newbie speaking of css so, I can't get, what I am missing.
EDIT:
Forgot one thing. This works fine in jsfiddle.

Answer 1

Just reset all your styles and give </li>. You are using <li> only for opening and closing it:
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
Your Mistake
<ul>
<li>Test<li> <!-- Should be </li> not <li> -->
<li>Test2
<ul>
<li>Test3</li>
</ul>
<li><!-- Should be </li> not <li> -->
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
<li><!-- Should be </li> not <li> -->
</ul>
Preview:

Answer 2

Just check this out...
OR
Provide the CSS you have used..
div {
text-align: left;
}
ul {
list-style: none;
}
<div>
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
</div>

Answer 3

I guess this might be your issue.
padding:0px;
margin:0px;
ul li ul
{
padding:0px;
}
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
ANSWER
Note : So remove padding property from your ul CSS.
ul li ul
{
/* padding:0px; REMOVE IT If It's 0PX' */
}
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>

Answer 4

The solution that I came up with is that you should wrap your un-ordered list with div tag that has a class name. Ex. <div class="test"></div>
HTML:
<div class="test">
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
</div>
CSS
.test ul li {
list-style: none;
text-align: left;
}