你这个具体可以改一下触发的元素
可以外面再套一个p
然后用外面的p来控制里面#navbar1这个p的显示和隐藏

function shubiaoin(){
    document.getElementById("navbar1").style.visibility="visible";
}
function shubiaoout(){
    document.getElementById("navbar1").style.visibility="hidden";
}

<p onmouseover="shubiaoin()" onmouseout="shubiaoout()"><p id="navbar1" ></p></p>

使用javascript幫該元素添加css中display的樣式
例如：document.getElementById("navbar1").style.display="none";

如果题主不想改变页面布局的话，可以使用透明度opacity来控制显示。

function shubiaoin(){
    document.getElementById("navbar1").style.opacity = 1;
}
function shubiaoout(){
    document.getElementById("navbar1").style.opacity=0;
}

不过opacity的IE兼容不太好。

我的理解是visibility虽然是隐藏并还占用位置，但实事是隐藏了，你鼠标移上去时，找不到元素，所以没办法响应onmouseover的事件吧。

用透明度吧，既不影响布局又不影响mouseover事件，mouseover后opacity：1；filter：alpha(opacity=100);
mouseout后opacity：0；filter：alpha(opacity=0);这样就可以兼容性就很好了