关于javascript修改二级菜单display属性的问题

网页的主体是菜单，二级菜单是隐藏的，以下为一个“书籍”菜单的代码。其中二级菜单的高的数值比一级菜单的要大，所以限制了一级菜单的高度，也声明了二级菜单的高度，计算后的二级菜单的高度也是声明了的二级菜单的高度，但是js控制二级菜单的时候，鼠标指针在二级菜单的停留的高度是一级菜单的高度。
代码如下：

 <div id="book">
            <div id="menu1" class="menu" onmouseover="changeDisplay1()" onmouseout="recoverDisplay1()" >
                <p class="title">书&nbsp&nbsp籍</p>
            </div>
            <div id="frame1" class="frame" style="display:none;" onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
                <ul style="color:#FFF;font-family:STFangsong;width:450px;margin-left:100px;margin-top:10px;padding-top:5px;">
                    <li>
                        &nbsp&nbsp&nbsp文&nbsp&nbsp艺&nbsp&nbsp&nbsp|<a href="../二级页面/index2.html">小说</a>　<a href="../二级页面/index2.html">文学</a>　<a href="../二级页面/index2.html">传记</a>　<a href="../二级页面/index2.html">艺术</a>　<a href="../二级页面/index2.html">青春文学</a>
                    </li>
                    <li>
                        人文社科|<a href="../二级页面/index2.html">历史</a>　<a href="../二级页面/index2.html">心理学</a>　<a href="../二级页面/index2.html">政治/军事</a>　<a href="../二级页面/index2.html">国学/古籍</a>　　　　　　　　　　　<a href="../二级页面/index2.html">哲学/宗教</a>　<a href="../二级页面/index2.html">社会科学</a>
                    </li>
                    <li>
                        经管励志|<a href="../二级页面/index2.html">经济</a>　<a href="../二级页面/index2.html">管理</a>　<a href="../二级页面/index2.html">金融与投资</a>　<a href="../二级页面/index2.html">励志与成功</a>
                    </li>
                    <li>
                        &nbsp&nbsp&nbsp科&nbsp&nbsp技&nbsp&nbsp&nbsp|<a href="../二级页面/index2.html">科普</a>　<a href="../二级页面/index2.html">IT</a>　<a href="../二级页面/index2.html">建筑医学</a>　<a href="../二级页面/index2.html">工业通信</a>　<a href="../二级页面/index2.html">电子技术</a>　　　　　　　　　<a href="../二级页面/index2.html">农林</a>　<a href="../二级页面/index2.html">科学与自然</a>
                    </li>
                    <li>
                        &nbsp&nbsp&nbsp教&nbsp&nbsp育&nbsp&nbsp&nbsp|<a href="../二级页面/index2.html">教材</a>　<a href="../二级页面/index2.html">教辅</a>　<a href="../二级页面/index2.html">考试</a>　<a href="../二级页面/index2.html">外语学习</a>
                    </li>
                </ul>
            </div>
        </div>
 #book{
    height:75px;
}
.menu{
    background:url("image/menu.png");
    background-repeat:no-repeat;
    width:328px;
    height:68px;
    padding-top:7px;
}
#menu1{
    margin-left:120px;
}
#frame1{
    background:url("image/frame1.png");
    background-size:100%;
    background-repeat:no-repeat;
    width:600px;
    height:188px;
    margin-top:-80px;
    margin-left:378px;
}
 function changeDisplay1(){
    document.getElementById("frame1").style.display="block";
}
function recoverDisplay1(){
    document.getElementById("frame1").style.display="none";
}