JSFiddle - React, Tailwind, and code Playground

by suit

HTML

<ul id="example0">
  <li>
     <a href="http://example.com">foo</a>
     <ul>
        <li>bar</li>
     </ul>
  </li>
<ul>
<br /><br />
<ul id="example1">
  <li>
     <span>foo</span>
     <ul>
        <li>bar</li>
     </ul>
  </li>
<ul> 
<br /><br /> 
<ul id="example2">
  <li>
     <span>foo</span>
     <ul>
        <li>bar</li>
     </ul>
  </li>
<ul>

CSS

a, span {
display: block;
    background: red;
}
li ul { display: none; }
li:hover ul { display: block; position: absolute; left: 25%; top; 0;}
#example2 span { cursor: pointer; }