关于javascript修改二级菜单display属性的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

小旋风柴进 2016-03-12 10:06:38 1567

网页的主体是菜单,二级菜单是隐藏的,以下为一个“书籍”菜单的代码。其中二级菜单的高的数值比一级菜单的要大,所以限制了一级菜单的高度,也声明了二级菜单的高度,计算后的二级菜单的高度也是声明了的二级菜单的高度,但是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";
}
JavaScript 前端开发
分享到
取消 提交回答
全部回答(0)
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程