Displaying text when hovering over first list item in a un ordered list : <p>If I have a li inside a ul and some hidden text on a page, how can I show that text when the user hovers over the first li in the ul?</p>

<p>I don't care if this is in CSS or JS, the text just has to appear only when hovering on the first itel in the list and no others. So when I hover over coffee, "hidden text" is visible</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;Coffee&lt;/li&gt;
  &lt;li&gt;Tea&lt;/li&gt;
  &lt;li&gt;Milk&lt;/li&gt;
&lt;/ul&gt;

&lt;label style="display: none"&gt;hidden text&lt;/label&gt;</code></pre>
</div>
</div>
</p>
