JSFiddle - React, Tailwind, and code Playground

by manueltaber

HTML

<div id="div1">
  <ul>
    <li id="listitem">1
      <ul id="sublist">
        <li>U1</li>
        <li>U2</li>
        <li>U3</li>
      </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

CSS

#div1 {
  position: fixed;
  z-index: 5;
  overflow-y: scroll;
  width: 200px;
  height: 100px;
  background-color: red;
}

#sublist {
  position: fixed;
  visibility: hidden;
  z-index: 10;
  left: 180px;
  top: 0;
  background-color: green;
}

JavaScript

$("#listitem").hover(
    function() {
    	$("#sublist").css({visibility: "visible"});
    }, function() {
       $("#sublist").css({visibility: "hidden"});
    }
)