移到空隙相当于移出dropdown了，此时你并没有移动到dropmenu上dropmenu就消失了，所以导致点击不了导航，可以用onmouseover和onmouseout，加个延时处理
#div1{
height: 100px;
width: 100px;
background: #000000;
position: relative;
}
#div2{
height: 200px;
width: 100px;
background: #00A1D6;
display: none;
position: absolute;
left: 0;
top: 130px;
}
window.οnlοad=function(){
var a=document.getElementById('div1')
var b=document.getElementById('div2')
var x=null
b.οnmοuseοver=a.οnmοuseοver=function(){
b.style.display='block';
clearTimeout(x);
}
b.οnmοuseοut=a.οnmοuseοut=function(){
x=setTimeout(function(){b.style.display='none';
},1000)
}
}
当然也可以用css实现，不过这要使用到伪元素巧妙的实现
#div1{
height: 100px;
width: 100px;
background: #000000;
position: relative;
}
#div2{
height: 200px;
width: 100px;
background: #00A1D6;
display: none;
position: absolute;
left: 0;
top: 130px;
}
#div2:before{
content: '';
background: transparent;
position: absolute;
top: -30px;
left: 0;
display: block;
height: 30px;
width: 100%;
}
#div1:hover #div2{
display: block;
}
如果不考虑兼容的话能用css做的就不用js实现吧，当然动画效果也是可以有的
#div1{
height: 100px;
width: 100px;
background: #000000;
position: relative;
}
#div2{
height: 0px;
width: 100px;
background: #00A1D6;
position: absolute;
left: 0;
top: 130px;
transition: all 0.4s ease;
}
#div2:before{
background: transparent;
position: absolute;
top: -30px;
left: 0;
display: block;
height: 30px;
width: 100%;
}
#div1:hover #div2{
height: 300px;
}
#div1:hover #div2:before{
content: '';
}
