电商导航实现

        window.onload = function(){
            var li = document.getElementsByTagName('li');
            for(var i=0;i<li.length;i++){
                li[i].a=i;
                li[i].onmouseover = function(){
                    this.className = 'lihover';

                    var h0 = (this.a)*30 +42;
                    var y = this.getElementsByTagName('div')[0].offsetHeight;
                    var h = this.getElementsByTagName('div')[0].offsetTop+y;
                    if(h<h0){
                        this.getElementsByTagName('div')[0].style.top = h0+'px';
                    }
                    if(y>550){
                        this.getElementsByTagName('div')[0].style.top = '3px';//防止网页窗口过小时内容显示不全
                    }
                }
                li[i].onmouseout = function(){
                    this.className='';
                }
            }
        }

设置一个lihover类，然后绑定事件。

style.top不能获取值

h0为li的top值，y为二级菜单元素的高度，h为二级菜单的offsetTop+offsetHeight。

当li和与之对应的二级菜单不在一起时，让二级菜单的top值等于对应li的top值

另附一张图