 <p><code>&lt;li&gt;</code> has optional close tags, so if the browser sees another <code>&lt;li&gt;</code> before a correpsonding <code>&lt;/li&gt;</code>, it implicitly inserts a close for the previous tag. You can verify this using the DOM inspector in your browser's developer tools. This means that Item 3's "subitems" are actually siblings to Item 3.</p> <p><img src="https://i.stack.imgur.com/3p7X0.png" alt="DOM view"></p> <ul> <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-li-element" rel="nofollow noreferrer">Relevant WHATWG spec showing optional close tag</a></li> <li><a href="http://www.w3.org/TR/html-markup/li.html" rel="nofollow noreferrer">W3 spec showing optional close tag</a></li> </ul>