做了一个简单的响应式导航条，遇到了不懂的问题，求大神帮忙一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        html,body{
            height: 100%;
        }

        #menu{
            border:1px solid #FF00B4;
            overflow: hidden;
        }

        #left{
            width: 80px;
            height: 50px;
            border:1px solid red;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            float: left;
        }

        #right{
            float: right;
        }

        #right ul{
            list-style: none;
        }

        #right ul li{
            display: inline-block;
            text-align: center;
        }

        #right ul li a{
            display: inline-block;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            margin-right:20px; 
        }

        .btn{
            width: 50px;
            height: 50px;
            background: aqua;
            float: right;
            display: none;
        }

        @media screen and (max-width:489px){
            #menu{
                position: relative;
            }

            #right ul{
                display: none;
            }
            .btn{
                display: block;
            }

            #right{
                width: 100%;
            }

            #right ul li{
                text-align: center;
                display: block;
            }

            #right ul li a{
                width: 100%;
                border-top:1px solid #F4EFEF;
            }

            #right ul li a:hover{
                background: #F5F5F5;
            }

            @media screen and (min-width:489px){
                #right ul{
                    display: block;
                }
            }

    }
    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    <script>
        $(function(){
            $(".btn").on("click",function(){
                $('ul').toggle();
            })
        })
    </script>
</head>
<body>
    <div id="menu">
        <div id="left">Hello</div>
        <button>
            
        </button>
        <div id="right">
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">nav</a></li>
                <li><a href="">head</a></li>
                <li><a href="">footer</a></li>
                <li><a href="">section</a></li>
                <li><a href="">about</a></li>
            </ul>
        </div>
    </div>

    122222<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
    1<br/>
</body>
</html>

第一个问题：我缩小浏览器窗口，点击按钮出现ul之后，再次点击隐藏ul。然后扩大浏览器，大屏幕下的导航条ul不见了。。。

第二个问题：在小窗口下，如何使点击按钮下拉的内容，悬浮在下面数字内容之上。我用了定位试了，感觉对于哪个层设置relative和absolute不是太清晰了。。。

abc123456789def

浏览 1914回答 1

1回答

随时随地看视频慕课网APP