JSFiddle - React, Tailwind, and code Playground

Tree_08

by Dave

HTML

<div style="">Basic</div>
<ul class='qqq' id="myUL" oncontextmenu="return false;">
  <li><span id="myUL_topLEV" class="caret">Beveys</span>
    <ul class="nested">
      <li><a>Water</a></li>
      <li><a>Coffee</a></li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
        <li><a>Black Tea</a></li>
          <li><a>White Tea</a></li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li><a>Sencha</a></li>
              <li><a>Gyokuro</a></li>
              <li><a>Matcha</a></li>
              <li><a>Pi Lo Chun</a></li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
</ul>
dfg

CSS

ul, #myUL {
  list-style-type: none;
  padding-left: 20px;
  display: inline-block;
 }

#myUL span,
#myUL a{
display: block;
cursor: default;
}

#myUL a::before{
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABaUlEQVR4Xo2Ru0ozQRiG35lsDipIPBCsFAQbO9MEtPIevAG7aG2nhaBFxMKL8AL+6gcLGxsPYCcELEUCIUYkCXuY2Zn51N0MaHaMPtU7fDMP78cwDKlfdhQDfCIADLCDfI4xnvN40WOdk/XyMkawAmz/b9HpZgUujq5fYfIFMVUyz43a/Aq+4NlAWiVhbsLDKDMFYH+jXNy77VaO79rNg9rCqp1xG6IohjL4BiGlNwgxEBqH1dlpqWiycdN+yDSIRAwyxrnf/dMbdv8FSe76aqm6WM6uIISEoZEGw/NVfQ2WvlDYOm/C1cC+sNjfyFCAdjWIYUCZFSz0NRvjaCAllE4FyhBceJwhkBqhkO4VImUgDCHWPwgIiDQlbbOC6FNAiDQbJ0jvOAVCpkM1pgFH2tIlEDJdIdL0ewPpbBCDGAMYBxjccJ7cES6BH0o8tnrwhYbSxinJcYaXfoQgdAgQCOycXeBPlPLGxnfDEM7p1dI2cAAAAABJRU5ErkJggg==');
}
    
#myUL a:hover, 
#myUL span:hover{
   background-color: rgb(153, 221, 255);
}


#myUL {
  /* position: absolute; */
  border: 1px solid;
  display: inline-block;
  overflow: auto;
  width: 100px;
  height: 100vh;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.caret {
  /* cursor: pointer; */
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVR4XsWSP2tTURjGf+/NvaUVQ0uoCE5tl5YiTi4OpXSuX8HBQTGfoJN7N0el/QTdsjslfgMpFDEQIRpCIGD+oPdPkkfLPdxzC6FLh/6Gczhwnuc953lf7orhiL/wDvjITeqrB3ziFuy/UDiip2cE1WcALCZfyS7f4rjdINo9JXi4X34Tkj/K8h2B29D0iuzbCSGAhWso7uAlDoT8GRWOuQYgnM8C9Pc7huXXZYWPBCQ94m4DBJgAw62IAPv9eUXVrSOWsfjTZTpoU92rU3n0EpnyQgIzGLWOCdM0RPEPHK4IJKMe0/Gc2v4rKhsvUDbEDITnWms/G+uSyl1VEdyT56+xBzuAqwzllV/N91j7YlPbh28wb+ATM5bgr3Ra54RJEmFJz9UAmUDmrXwLEaL8jySNrjOIUNoHQF7GQoaZANDSAVZukKUhZIMiWeQGRyzvv7OUCzHMZhWG3T61x1Fp7OQMDcmpMEwqopmMA7Iswpof9sR98g95+62azDEuRwAAAABJRU5ErkJggg==');
  /* content: "\25B6"; */
  color: black;
  display: inline-block;
  margin-right: 1px;
}

.caret-down::before {
  content:...

JavaScript

window.onload = function() {

document.getElementById("myUL").addEventListener("mouseover", function(e) {

  if (e.target.classList.contains('caret')) {

    this.onmouseup = (function(d) {
if (d.button === 0 && d.target.classList.contains('caret')) {//left vlivk actions
e.target.parentElement.querySelector(".nested").classList.toggle("active");
e.target.classList.toggle("caret-down");
}

    });
  }
})
//////////////////////////////////
}