为了账号安全,请及时绑定邮箱和手机立即绑定

代码没报错 但是为什么二级菜单的高度停在3px就不动了呢?求解各位大神~~~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        .top-nav

        {

            font-size: 14px;

            font-weight: bold;

            list-style: none;

        }

        .top-nav li

        {

            float: left;

            margin-right: 1px;

        }

        .top-nav li a

        {

            line-height: 34px;

            text-decoration: none;

            background: #3f240e;

            color: #fff;

            display: block;

            width: 80px;

            text-align: center;

        } 

        .top-nav ul:after,.top-nav ul:before{

            content:"";

            display:block;

            height: 0;

        }

        .top-nav ul:after{

            clear:both;

        }

        .top-nav ul

        {

            zoom:1;

            list-style: none;

            /* display: block; */

            padding: 0;

            position: absolute;

            height: 0;

            overflow: hidden;

        }

        .top-nav ul li{

            float:left;

        }

        

        .top-nav li a:hover

        {

            background: url(http://img1.sycdn.imooc.com//5461b50d0001e28000010034.jpg) 0 0 repeat-x;

        }

        .note

        {

            color: #3f240e;

            display: block;

            background: url(http://img1.sycdn.imooc.com//5461b50d0001e28000010034.jpg) 0 0 repeat-x;

        }

        .corner

        {

            display: block;

            height: 11px;

            background: url(http://img1.sycdn.imooc.com//5461b5620001410d00170011.jpg) 31px 0 no-repeat;

        }

    </style>

    <script type="text/javascript">

        var t; //将这里的定义放在函数中声明 将产生抖动(未清理定时器)

        window.onload = function () {

           //鼠标经过时的效果

           //bug: 鼠标多次快速移动 导致子菜单抖动 ok 抖动未清除setTimeout

            var Lis = document.getElementsByTagName("li");

            for(var i=0,len=Lis.length; i<len; i++){  

                Lis[i].onmousemove = function(){

                    var u = document.getElementById('mnuUL');

                    //var tmove,tleave; 

                    if(u!=undefined)

                        clearTimeout(t);

                        ChangeH(u.id,1);

                }  

                Lis[i].onmouseleave = function () {

                    var u = document.getElementById('mnuUL');


                    if (u != undefined) 

                        clearTimeout(t);

                        ChangeH(u.id,-1);

                }

            }

        }


        function ChangeH(id, count) {

    //  根据ID找到ulList,同时得到其高度

            var ulList = document.getElementById(id);

            var h = ulList.offsetHeight;

            //var t = null;

            clearTimeout(t);

            h += count;

            if (count > 0) {

                if (h <= 42) {

                    //  将高度赋值给ulList,同时,不断调用本函数

                    ulList.style.height = h + "px";

                    //tmove = setTimeout("ChangeH('" + id + "',1)", 10);

                    t = setTimeout("ChangeH('" + id + "',1)", 10);

                }

                else {

                    return;

                }

            }

            else {

                if (h > 0) {

                    //  将高度赋值给ulList,同时,不断调用本函数

                    ulList.style.height = h + "px";

                    //tleave = setTimeout("ChangeH('" + id + "',-1)", 10);

                    t = setTimeout("ChangeH('" + id + "',-1)", 10);

                }

                else {

                    //ulList.style.display = "none";

                    return;

                }

            }

        }

    </script>

</head>

<body>

    <ul class="top-nav">

        <li><a href="#"><span class="note">慕课网</span></a> </li>

        <li><a href="#">课程大厅</a> </li>

        <li><a href="#">学习中心</a>

            <ul id="mnuUL">

                <span class="corner"></span>

                <li><a href="#">前端课程 </a></li>

                <li><a href="#">手机开发</a> </li>

                <li><a href="#">后台编程</a></li>

            </ul>

        </li>

        <li><a href="#">关于我们</a></li>

    </ul>

    

</body>

</html>


正在回答

1 回答

在我这里是正常显示的。

你换个浏览器试试呗。

0 回复 有任何疑惑可以回复我~
#1

teddybearscm 提问者

我换了一下浏览器,火狐和IE下是正常的,但是谷歌不正常,能再帮忙看看这个要怎么办吗?万分感激~~
2016-07-04 回复 有任何疑惑可以回复我~
#2

yuyang123 回复 teddybearscm 提问者

用谷歌下的隐身窗口打开这个页面,初步怀疑是你谷歌浏览器的插件的影响。代码本身并没有问题。
2016-07-04 回复 有任何疑惑可以回复我~
#3

teddybearscm 提问者 回复 yuyang123

好的 谢谢~
2016-07-04 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

代码没报错 但是为什么二级菜单的高度停在3px就不动了呢?求解各位大神~~~~

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信