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

我想让我的li横向显示,总是调不出来,崩溃了要


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>多级下拉菜单</title>

    <style type="text/css">


        #navmenu{

           list-style: none;  

        }

        #navmenu li{

            float: left;

            height: 40px;

            padding: 0;

            position: relative;

        }

        #navmenu li a{

            text-decoration: none;

            padding: 0 10px;

            width: 94px;

            text-align: center;

            display: block;

            height: 40px;

            line-height: 40px;

            background-color: #111111;

            color:#ffffff;

        }

        #navmenu li ul{

            height: 0;

            list-style: none;

            display: none;

            position: absolute;

            left: 0;

            top: 40px;

            padding: 0;

            overflow: hidden;

        }

        #navmenu li ul li{

            display:block;

            float: left;

        }

        #navmenu li a:hover{

            border-radius: 6px;

            background:url(images/slide-pannel_14.png) 0 0 repeat-x;

            box-shadow: 0 2px 0 #e4393c;

        }


        .note{

            color:#eee;

            display: block;

            background:url(images/slide-pannel_14.png) 0 0 repeat-x;

        }

        .corner{

            display: block;

            margin-top: 3px;

            height: 11px;

            background: url(images/bird.png) 47px 0 no-repeat;

        }

    </style>

</head>


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

                        AddH(u.id);

                    }; 

                };

                lis[i].onmouseout=function(){

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

                    if (u!=undefined) {  

                        SubH(u.id);

                    }

                };

            };

    };

    function AddH(id){

        var uls=document.getElementById(id);

        var h=uls.offsetHeight;

        h+=1;

        if (h<=137) {

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

            setTimeout("AddH('"+id+"')",20);

        }else{

            return;

        };

    };

    function SubH(id){

        var uls=document.getElementById(id);

        var h=uls.offsetHeight;

        h-=1;

        if (h>=0) {

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

            setTimeout("SubH('"+id+"')",20);

        }else{

            uls.style.display="none";

            return;

        };

    };*/

    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].onmouseout=function(){

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

                    if (u!=undefined) {  

                        ChangeH(u.id,-1);

                    };

                };

            };

    };


    /*function ChangeH(id,count){

        var uls=document.getElementById(id);

        var h=uls.offsetHeight;

        h+=count;

        if (count>0) {

            if (h<=137) {

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

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

            }else{

            return;

            };

        }else{

           if (h>=0) {

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

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

        }else{

            uls.style.display="none";

            return;

        }; 

        }

    }*/

    function ChangeH(id,count){

        var ulList = document.getElementById(id);

        if(ulList.movement){

            clearTimeout(ulList.movement);

        };

        var h = ulList.offsetHeight;

            h+=count;

            if(h<=137 && h>=0){

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

            ulList.movement = setTimeout(function(){ChangeH(id,count)}, 10);

                } else {

                return;

            };

    }


</script>

<body>

    <ul id="navmenu">

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

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

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

            <ul id="menUL">

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


正在回答

2 回答

原来是我的position:relative放错地方了,终于好了

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

是下拉菜单的li为什么不能横向排列

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

举报

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

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

进入课程

我想让我的li横向显示,总是调不出来,崩溃了要

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