JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Nav1</h3>
<ul id="nav1">
    <li>Link 1</li>
    <li>
        Link 2
        <ul id="subnav1">
            <li>Sublink 1</li>
            <li>Sublink 2</li>
            <li>Sublink 3</li>
        </ul>
    </li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>
<h3>Nav2</h3>
<ul id="nav2">
    <li>Link 1</li>
    <li>
        Link 2
        <ul id="subnav2">
            <li>Sublink 1</li>
            <li>Sublink 2</li>
            <li>Sublink 3</li>
        </ul>
    </li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>

CSS

#nav1 > li{list-style-type:square;}
#nav2 > li{background-color: yellow;}
#nav2 li li:first-child{background-color:red;}