Как вывести подсписок с помощью mouseover и mouseout?

ul li ul { 
  display: none; 
} 
 
ul li:hover ul { 
  display: block; 
}

<div> 
  <ul> 
    <li>Element 1</li> 
    <li>Element 2 
      <ul> 
        <li>Element 2.1</li> 
        <li>Element 2.2</li> 
        <li>Element 2.3</li> 
        <li>Element 2.4</li> 
      </ul> 
    </li> 
    <li>Element 3</li> 
    <li>Element 4 
      <ul> 
        <li>Element 4.1</li> 
        <li>Element 4.2</li> 
        <li>Element 4.3</li> 
        <li>Element 4.4</li> 
      </ul> 
    </li> 
  </ul> 
</div>

document.querySelectorAll("div > ul > li").forEach(i => { 
  i.addEventListener("mouseenter", function(e) { 
    var ul = this.querySelector("ul"); 
    if (ul) 
      ul.classList.add("show"); 
  }); 
  i.addEventListener("mouseleave", function(e) { 
    var ul = this.querySelector("ul"); 
    if (ul) 
      ul.classList.remove("show"); 
  }); 
});

ul li ul { 
  display: none; 
} 
 
.show { 
  display: block; 
}

<div> 
  <ul> 
    <li>Element 1</li> 
    <li>Element 2 
      <ul> 
        <li>Element 2.1</li> 
        <li>Element 2.2</li> 
        <li>Element 2.3</li> 
        <li>Element 2.4</li> 
      </ul> 
    </li> 
    <li>Element 3</li> 
    <li>Element 4 
      <ul> 
        <li>Element 4.1</li> 
        <li>Element 4.2</li> 
        <li>Element 4.3</li> 
        <li>Element 4.4</li> 
      </ul> 
    </li> 
  </ul> 
</div>