JSFiddle - React, Tailwind, and code Playground

HTML

<p>Non-working</p>
<ul class="top">
    <li>level 1
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>level 2</li>
</ul>

<p>Working</p>
<ul class="top2">
    <li><span>level 1</span>
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li><span>level 2</span></li>
</ul>

CSS

.top li { color: black; }
.top > li:first-line { text-decoration:underline}.
.top > li::first-letter {text-decoration:none}
.top > li:hover { color:blue; }

.top2 span { text-decoration: underline; }
.top2 span:hover { color:blue; }