DOM事件探秘4-3 把最后点击其他地方收回状态栏改成离开状态栏自动消失出现bug

window.onload = Panel;

function Panel() {
    var oTitle = getByClass('login_logo_webqq', 'loginPanel')[0];
    //拖拽
    oTitle.onmousedown = movePanel;
    //关闭
    var oClose = document.getElementById('ui_boxyClose');
    oClose.onclick = function () {
        document.getElementById('loginPanel').style.display = 'none';
    }
    //切换状态
    var loginState = document.getElementById('loginState'),
        stateList = document.getElementById('loginStatePanel'),
        lis = stateList.getElementsByTagName('li'),
        stateTxt = document.getElementById('login2qq_state_txt'),
        stateShow = document.getElementById('loginStateShow');

    loginState.onclick = function (e) {
        stateList.style.display = 'block';
    }
    //鼠标滑过
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            this.style.backgroundColor = '#567';
        }
        lis[i].onmouseout = function (e) {
        e = event || window.event;
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
            this.style.backgroundColor = '#fff';
        }
        //    点击事件
        lis[i].onclick = function (e) {
            e = event || window.event;
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
            var id = this.id;
            stateList.style.display = 'none';
            stateShow.className = 'login-state-show ' + id;
            stateTxt.innerHTML = getByClass('stateSelect_text', id)[0].innerHTML;
        }

    }
    stateList.onmouseout = function () {
        this.style.display = "none";
    }
}

鼠标离开后状态栏没有立刻消失，甚至不消失，再放上后离开才消失重重复复，不知道是不是冒泡的问题但是找了很久没找到，造成这样的原因是什么，应该如何修改？