javascript - マウスイベント.onmouseleaveの動作と混同

Question

ここにHTMLコードがあります

<div id="_navigation">
            <ul>
                <li>Destinations</li>
                <li><a href="HtmlPage.html">Culture</a></li>
                <li><a href="HtmlPage.html">Adventure</a></li>
                <li><a href="HtmlPage.html">Hotels</a></li>
                <li><a href="HtmlPage.html">Wild Life</a></li>
                <li><a href="HtmlPage.html">History</a></li>
                <li><a href="HtmlPage.html">About</a></li>
            </ul>
            <div id="_subNavigation">
                <div id="_navigationFirst">
                    this is first subnavigation it must be showed when user clicks on Distinations
                </div>
                <div id="_navigationSecond">
                    this is second subnavigation it must be showed when user clicks on Culture
                </div>
                <div id="_navigationThird">
                    this is third subnavigation it must be showed when user clicks on Adventure
                </div>
            </div>
        </div>

CSS を適用した後、CSS の他のことを忘れているように見え ます... id _subNavigation を持つ CSS div では、display:none; が設定されています。Javaスクリプトを使用して、誰かが目的地をクリックすると_navigationFirst（IDです）が表示され、ユーザーがナビゲーション領域からマウスを離すと（非表示になります）表示されるようにしたい..ユーザーがクリックすると表示されるようにすることに成功しましたしかし、ユーザーがマウスをナビゲーション領域から離しても消えません..これが私のjavasciptです

目的地をクリックすると、そのような画像が表示されます

"use strict";
document.getElementById("_navigation").getElementsByTagName("ul")[0].getElementsByTagName("li")[0].onclick = function () {
    console.log("got into block");
    document.getElementById("_navigationFirst").style.display = "block";
}
document.getElementById("_navigation").onmouseleave = function () {
    console.log("you left _navigation block");
    document.getElementById("_navigationFirst").style.display = "none";
}

では、 CodeGurusはどこが間違っているのでしょうか? そして、私が得ようとしている効果を得る方法