javascript - マウスオーバーで特定のdivのアイテムを表示する方法

Question

私はdiv構造を持っています

<div id="navigate">
   <div class="menu">
       <div class="group">Mail</div>
       <div class="item">Folders</div>
       <div class="item">Messages</div>
   </div>
   <div class="menu">
       <div class="group">Contacts</div>
       <div class="item">Friends</div>
       <div class="item">Work</div>
   </div>
   <div class="menu">
       <div class="group">Setting</div>
       <div class="item">General</div>
       <div class="item">Account</div>
   </div>
</div>

現在、すべての項目が非表示になっており、クラスが「グループ」の div のみが表示されています。私がやりたいことは、特定のメニュー div にマウスを合わせると、そのメニューの項目だけが表示されることです。

今、私はこのコードを持っています:

function initialise()
{
    hideAllItems();

    setMouseOvers();
}

function hideAllItems()
{
    var nav = document.getElementById("navigate");
    var items = nav.getElementsByClassName("item");

    for(var i = 0; i < items.length; i++)
    {
        items[i].style.visibility = "hidden";
        items[i].style.display = "none";
    }
}

function setMouseOvers()
{
    var nav = document.getElementById("navigate");
    var menuArr = nav.getElementsByClassName("menu");

    for(var x = 0; x < menuArr.length; x++)
    {
        var itemArrs = menuArr[x].getElementsByClassName("item");

        /*var show = function(){ show(itemArrs); };
        var hide = function(){ hide(itemArrs); };*/
        menuArr[x].onmouseover=function(){ show(itemArrs); };
        menuArr[x].onmouseout=function(){ hide(itemArrs); };
    }
}

function show(itemArr)
{
    for(var i = 0; i < itemArr.length; i++)
    {
        alert(itemArr[i].innerHTML);
        itemArr[i].style.visibility = "visible";
        itemArr[i].style.display = "block";
    }
}

function hide(itemArr)
{
    for(var i = 0; i < itemArr.length; i++)
    {
        itemArr[i].style.visibility = "hidden";
        itemArr[i].style.display = "none";
    }
}

そして、これは機能しますが、どのメニューにカーソルを合わせても、一般とアカウントのみが表示されると考えていました。何がうまくいかないのか漠然と理解していますが、とにかくそれを修正する方法がわかりません。何か案は？できれば html 構造を変更したくありません (ID の追加や特定のクラスの作成など)。