Question

我已将水平导航转换为垂直响应式导航，但是当您通过点击“菜单”打开响应式导航顶级（ul li）时，ul li的高度太高（请参阅顶层下方的灰色区域）并且下一级别的最后一个菜点消失了（菜单1应该有7个子级别的菜单点，菜单2应该有5个，菜单3应该有3个）。

我认为这与桌面版的以下CSS有关，但不知道如何解决问题：

            ul.topNav li ul {
            display: none;
            **position: absolute;
            top: 2.3rem;**
            background-color: rgb(245, 245, 245);
        }

尝试了很多，但没有成功。您可以在下面找到所有代码以及使其运行并查看结果的链接。不要忘记在320和979px之间调整窗口大小，并可能重新加载以确保它有效。

function init() {

                var ww = document.body.clientWidth;
                var mobileLayout = ww <= 1024;

                if (mobileLayout) {
                    /* show topNav */
                    $("#menuIcon").click(function () {
                        $("#topNavResp").fadeToggle(100);
                        });
                        /* show topNav second level and close all others */
                        $('.topNavLi').on('click', function (event) {
                            event.preventDefault();
                            $(this).next('ul').slideToggle();

                            $(this).parent().siblings().children().next().slideUp();
                            return false;
                        });

                    } else {
                        alert('please reduce/shrink your window and reload');
                    }
                }

            html {
                font-size: 15px;
                background-color: rgba(227, 227, 227, 1);
            }
            ol, ul, li {
                list-style-type: none;
            }
            a {
                text-decoration: none;
            }

            /* ------------------- TOP NAV BAR ------------------------------------------ */

            #headerNavBar {
                width: 100%;
                height: 2.4rem;
                line-height: 2.4rem;
                display: block;
                background-color: #D3D3D3;
                *zoom: 1;
            }

            ul.topNav {
                float: right;
                width: 75%;
                height: 2.3rem;
                position: relative;
                z-index: 10;
            }
            ul.topNav > li {
                line-height: 2.3rem;
                float: left;
                width: auto;
                position: relative;
            }

            ul.topNav li a.topNavLi {
                height: 2.3rem;
                float: left;
                padding: 0 10.3%;
            }
            ul.topNav li a:hover.topNavLi,
            ul.topNav li:active a.topNavLi,
            ul.topNav li:hover a.topNavLi {
                    border-bottom: 0.13rem solid #e23427;
                    color: #e23427;
            }

            /* ------------------- TOP NAV 2nd LEVEL------------------------------------- */

            ul.topNav li ul {
                display: none;
                position: absolute;
                top: 2.3rem;
                background-color: rgb(245, 245, 245);
            }
            ul.topNav li ul li {
                float: none;
                display: block;
            }
            ul.topNav li ul li a {
                display: block;
                color: #231f20;
            }
            ul.topNav li ul li:hover,
            ul.topNav li ul li:active {
                    background-color: rgb(227, 33, 33);
            }
            ul.topNav li ul li:hover a,
            ul.topNav li ul li:active a {
                    color: #fff;
            }
            /**************************************************************************** */
            /**************************************************************************** */
            @media only screen and (min-width: 320px) and (max-width: 979px)
            {
                body {
                    width: 95%;
                    margin: 0 auto;
                }
                #wrapper {
                    width: 100%;
                }    
                #pageHead {
                    width: 100%;
                }

                /* ------------------- NAVI Responsive  --------------------------------- */
                #headerNavBar {
                    height: 2.9rem;
                    line-height: 2.9rem;
                    position: relative;
                }

                #menuIcon {
                    display: block;
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 0.3rem 1rem 0 0;
                }         
                ul.topNav {
                    display: none;
                    float: none;
                    width: 100%;
                    position: absolute;
                    top: 2.9rem;
                }
                .topNav > li {
                    width: 100% !important;
                    background-color: #D3D3D3;
                    display: block;
                    position: static;
                    border-bottom: 1px solid #FFF;
                }
                ul#topNavResp.topNav li a.topNavLi,
                ul#topNavResp.topNav li ul li a {
                    width: 100%;
                }
                ul.topNav li a:hover.topNavLi,
                ul.topNav li:active a.topNavLi,
                ul.topNav li:hover a.topNavLi {
                border: none;
                }
            /* ------------------- TOP NAV Responsive 2nd LEVEL ------------------------- */
                ul.topNav li ul {
                    display: none;
                    width: 100%;
                    position: static;
                    padding-left: 10.3%;
                    background-color: rgb(245, 245, 245);
                }
                ul.topNav li ul li {
                    width: 100%;
                }
            }

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body onload="init();">
        <div id="wrapper">
            <div id="pageHead">

                <nav id="headerNavBar">                 

                    <a href="#" id="menuIcon">MENU</a>
                 

                    <ul class="topNav" id="topNavResp">
                        <li>
                            <a href="#" class="topNavLi">Menu 1</a>
                            <ul>
                                <li><a href="#">11111</a></li>
                                <li><a href="#">22222</a></li>
                                <li><a href="#">33333</a></li>
                                <li><a href="#">44444</a></li>
                                <li><a href="#">55555</a></li>
                                <li><a href="#">66666</a></li>
                                <li><a href="#">77777</a></li>
                            </ul>
                        </li> 
                        <li>
                            <a href="#" class="topNavLi">Menu 2</a>
                            <ul>
                                <li><a href="#">11111</a></li>
                                <li><a href="#">22222</a></li>
                                <li><a href="#">33333</a></li>
                                <li><a href="#">44444</a></li>
                                <li><a href="#">55555</a></li>
                            </ul>
                        </li> 
                        <li>
                            <a href="#" class="topNavLi">Menu 3</a>
                            <ul>
                                <li><a href="#">11111</a></li>
                                <li><a href="#">22222</a></li>
                                <li><a href="#">33333</a></li>
                            </ul>
                        </li>

                    </ul>

                </nav><!-- end topNav -->
            </div>
 
        </div><!-- end wrapper -->

    </body>
</html>

Answer 1

更改规则：

@media only screen and (max-width: 979px) and (min-width: 320px){ ul.topNav li ul { ... position: inherit; } }

要：

@media only screen and (max-width: 979px) and (min-width: 320px){ ul.topNav li ul { ... position: static; } }

水平导航到垂直响应导航，响应式导航顶层有太多高度，最后一级导航消失

1 个答案: