ul li css not working properly

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

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; 
}

Answer 4

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>