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

老师提供一下源码吧

老师提供一下源码吧??   出错了   可是怎么都解决不了

正在回答

1 回答

<!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>

    <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

        {

            list-style: none;

            display: none;

            padding: 0;

            position: absolute;

            height: 0;

            overflow: hidden;

        }

        

        .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">

        window.onload = function () {

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

       //鼠标经过时的效果

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

                Lis[i].onmouseover = function () {

                    var u = this.getElementsByTagName("ul")[0];

                    if (u != undefined) {

                        u.style.display="block";

                        ChangeH(u.id,1);

                    }

                }

                

                Lis[i].onmouseleave = function () {

                    var u = this.getElementsByTagName("ul")[0];

                    if (u != undefined) {

                        ChangeH(u.id,-1);

                    }

                }

            }

        }


        function ChangeH(id, count) {

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

            var ulList = document.getElementById(id);

            var h = ulList.offsetHeight;

            h += count;

            if (count > 0) {

                if (h <= 42) {

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

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

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

                }

                else {

                    return;

                }

            }

            else {

                if (h > 0) {

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

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

                    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/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

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

进入课程

老师提供一下源码吧

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