仿新浪下拉菜單

• 要求
  仿新浪網，鼠標移入顯示下拉菜單，鼠標移出隱藏下拉菜單，具體表現如下圖：
  

• 代碼

    <ul>
        <li id="top">微博</li>
        <li class="hide">私信</li>
        <li class="hide">評論</li>
        <li class="hide">@我</li>
    </ul> 
    <script>
        var top = document.getElementById('top');
        var hide = document.getElementsByClassName('hide');//返回的是一個元素集合
        var ul = document.querySelector('ul');
        // console.log('123');
        ul.onmouseover = function() {
        //使用top.onmouseover時會在鼠標一離開zd元素時，下拉菜單立即隱藏，應該效果一樣才對啊？
           hide[0].style.display = 'block';
           hide[1].style.display = 'block';
           hide[2].style.display = 'block';   
        }
        ul.onmouseout = function () {
            hide[0].style.display = 'none';
            hide[1].style.display = 'none';
            hide[2].style.display = 'none';  
        }
    </script>

• 問題
  如注釋處