1、HTML：



<div id="leftda">
                <ul class="leftmenu" id="leftmenu">
                    <li id="1" style="background-image:url(img/2.png);"><span id="span1"></span>商品住房公积金贷款审批</li>
                    <li id="2"><span id="span2"></span>国有土地上房屋征收政策咨询</li>
                    <li id="3"><span id="span3"></span>预告登记变更登记</li>
                    <li id="4"><span id="span4"></span>集体建设用地使用权首次登记</li>
                    <li id="5"><span id="span5"></span><div id="begin_5" style="display: inline-block;">集体建设用地使用权及建筑物、构筑物所有权登记注销登记</div><div id="end_5"></div></li>
                    <li id="6"><span id="span6"></span><div id="begin_6" style="display: inline-block;">委托按月划转提取公积金归还贷款本息服务</div><div id="end_6"></div></li>
                    <li id="7"><span id="span7"></span><div id="begin_7" style="display: inline-block;">因重大疾病造成家庭生活严重困难提取住房公积金</div><div id="end_7"></div></li>
                </ul>
            </div>


CSS：



#leftda {
    position:absolute;
    top:80px;
    left:60px;
    height:420px;
    overflow: hidden;
}
.leftmenu>li{
    background-image:url(../img/1.png);
    background-repeat: no-repeat;
    list-style:none;
    font-size: 18px;
    width:260px;
    height:60px;
    line-height:60px;
    text-align:center;
    margin-bottom:10px;
    cursor:pointer;
    overflow: hidden;
    white-space: nowrap;
}


JS：



1、首先利用clientHeight获取leftda高度：var leftdaheight = document.getElementById("leftda").clientHeight;//菜单栏外层div的高度
2、再获取内容#leftmenu的高度
3、设置一次向上或者向下的高度（这里设置的是li标签的高度）
4、计算向上或者向下时每次追加li的高度变为内容的顶部和外层盒子的顶部的距离


 document.getElementById("leftmenu").style.marginTop = -topheight + 'px';