Nested Lists
Real-world lists rarely stay flat — a table of contents has
sub-sections, a navigation menu has dropdowns, a recipe has
sub-steps. HTML lets you nest any list type inside any other, as
long as the nested list sits inside an <li>.
The Core Rule
A nested list is placed inside an <li>, not directly inside the
parent <ul>/<ol>. This keeps the sub-list semantically tied to
the specific item it belongs to.
nesting-rule.html
<ul>
<li>
Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables</li>
</ul>Nesting <ul> Inside <li>
The most common case: a sub-list of the same type as the parent.
ul-in-li.html
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend
<ul>
<li>Databases</li>
<li>APIs</li>
</ul>
</li>
</ul>Nesting <ol> Inside <ul>
You can also mix list types — an unordered item that expands into a numbered sub-procedure, for example.
ol-in-ul.html
<ul>
<li>
Deploying to production
<ol>
<li>Run the test suite</li>
<li>Build the production bundle</li>
<li>Push to the release branch</li>
</ol>
</li>
<li>Rolling back a release</li>
</ul>Multi-Level Navigation Menus
Nested <ul>s are the standard building block for dropdown/flyout
navigation menus — the visual dropdown behavior comes entirely from
CSS (and sometimes JS), but the underlying structure is just nested
lists.
nav-menu.html
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li>
<a href="/products">Products</a>
<ul>
<li><a href="/products/laptops">Laptops</a></li>
<li><a href="/products/phones">Phones</a></li>
</ul>
</li>
<li><a href="/about">About</a></li>
</ul>
</nav>list-style: none; margin: 0; padding: 0; on every<ul> in the menu, then rebuild spacing and dropdown positioning with CSS.Three or More Levels Deep
deep-nesting.html
<ul>
<li>
Continents
<ul>
<li>
Asia
<ul>
<li>Japan</li>
<li>India</li>
</ul>
</li>
<li>Europe</li>
</ul>
</li>
</ul>Accessibility Implications of Deep Nesting
Screen readers announce nesting depth ("list, 2 items, nested list level 2") — very deep nesting (4+ levels) can become hard to follow by ear.
Deeply nested dropdown menus are also harder to navigate by keyboard alone — make sure every level is reachable with Tab/Arrow keys and visibly focused.
Consider flattening very deep hierarchies into separate pages or a different navigation pattern (like a sitemap page) once you exceed 2-3 levels.
<ul> must live inside an <li> of the parent list. Placing a <ul> as a direct sibling of <li> elements (not wrapped in one) is invalid and breaks the parent-child relationship assistive tech relies on.