Your knowledge of how to nest is incorrect (but does work in all browsers I have tested!).
To see it properly done take a look at how nesting is done in the nav.
Or
try this shortened snippet based on your above. The second level ul is actually nested inside the first li tag because the nested list belongs to that list item.
Code:
<ul>
<li>First item
<ul>
<li>First item Quality A</li>
<li>First item Quality B</li>
</ul>
</li>
<li>Second item</li>
</ul>
Or based on a quick web search (which you should probably do before asking here

)
See
https://stackoverflow.com/questions/...ml-nested-list
And:
https://developer.mozilla.org/en-US/...#nesting_lists