Наводка мыши не на элемент

    <header class="header">
    <div class="title">Lorem</div>
    <div class="exc">
        <span><a href="#">|About us|</a></span>
        <span><a href="#">|Contact|</a></span>
        <span><a href="#">|Sign in|</a></span>
    </div>
</header>

<ul class = 'list'>
    <li class="points one">egkjeg
        <ul id="list2">
            <li class="points2 two">egkjeg</li>
            <li class="points3 three">egkjeg</li>
            <li class="points4 four">egkjeg</li>
            <li class="points5 five">egkjeg</li>
        </ul>
    </li>
    <li class="points two">egkjeg</li>
    <li class="points three">egkjeg</li>
    <li class="points four">egkjeg</li>
    <li class="points five">egkjeg</li>
</ul>
let hoverable = document.querySelector(".points.one")
hoverable.addEventListener("mouseout", ()=>{
  document.getElementById("list2").style.transition = "0.5s";
    document.getElementById("list2").style.display = "none";
})
hoverable.addEventListener('mouseover', () => {
  document.getElementById("list2").style.display = "block";
  document.getElementById("list2").style.transition = "0.5s";
})

Я ожидаю от программы, что при наводке мыши на элемент с классом class = "list2" список появляется, а когда я убираю курсор с данного элемента, то список исчезает.

Суть проблемы такова: Когда курсор находится на одной линии с данным элементом, список все равно появляется, а должен исчезнуть соответственно