当我在手机等移动平台上查看我的网站时,“服务”的菜单选项不会下拉,但会在较大的屏幕(例如笔记本电脑和更大的屏幕)上显示

我已经在Codepen上尝试了该代码,它可以正常工作,但是在我的网站上不起作用。


        / *菜单样式* /

    .third-level-menu {
        position: absolute;
        top: 0;
        right: -150px;
        width: 150px;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    .third-level-menu>li {
        height: 30px;
        background: #CCCCCC;
    }

    .third-level-menu>li:hover {
        background: #CCCCCC;
    }

    .second-level-menu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 167px;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    .second-level-menu>li {
        position: relative;
        height: 40px;
        background: #CCCCCC;
    }

    .second-level-menu>li:hover {
        background: #CCCCCC;
    }

    .top-level-menu {
        list-style: none;
        padding: 0 0 0 0px;
        margin: 0;
    }

    .top-level-menu>li {
        position: relative;
        float: right;
        height: 40px;
        width: 120px;
        padding-top: 0px;
        background: gainsboro;
    }

    .top-level-menu>li:hover {
        background: #CCCCCC;
    }

    .top-level-menu li:hover>ul {
        /* On hover, display the next level's menu */
        display: inline;
    }
    /* Menu Link Styles */

    .top-level-menu a
    /* Apply to all links inside the multi-level menu */

    {
        font: normal 14px Arial, Helvetica, sans-serif;
        color: #000000;
        text-decoration: none;
        padding: 0 0 0 20px;
        /* Make the link cover the entire list item-container */
        display: inline-block;
        line-height: 20px;
        border: none;
    }

    .top-level-menu a:hover {
        color: #000000;
    }
</style>



    

    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
            <a class="navbar-brand" href="#page-top"></a>
        </div>

        <img class="img-responsive-logo" src="img/Urban Living Therapy - Logo V2-3 TRANSPARENT.png" alt="" height="300" width="250">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="top-level-menu">
                <li><a href="about.html">About</a></li>
                <li>
                    <a href="#">Services</a>
                    <ul class="second-level-menu">
                        <li>
                            <a href="ultherapy.html">Urban Living Therapy</a>
                            <ul class="third-level-menu">
                                <li><a href="#">Balance and Bounce</a></li>
                                <li><a href="#">No Shame</a></li>

                            </ul>
                        </li>

                        <li>
                            <a href="ulwellbeing.html">Urban Living Wellbeing</a>
                            <ul class="third-level-menu">
                                <li><a href="#">No name yet</a></li>
                                <li><a href="#">No name yet</a></li>
                            </ul>
                        </li>
                        <li><a href="professionals.html">For Professionals</a></li>
                    </ul>
                </li>
                <li><a href="index.html">Home</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>



        

    <div class="wrap-contact100">

        <!-- <div id="cf3" class="shadow" class="cushycms">
            <img class="top2" src="img/gallery/frank-busch-700111-unsplash.jpg" height="320px" />
            <img class="top1" src="img/gallery/sharon-mccutcheon-523207-unsplash.jpg" height="320px" />
            <img class="top3" src="img/gallery/milan-popovic-674483-unsplash.jpg" height="320px" />
        </div> -->


        <!-- <div class="contact100-form-title" class="cushycms" style="background-image: url(img/gallery/frank-busch-700111-unsplash.jpg);"> -->
        <div class="contact100-form-title" class="cushycms" style="background-image: url(img/gallery/frank-busch-700111-unsplash.jpg);">
            <span class="contact100-form-title-1">
                Contact Us
            </span>

            <span class="contact100-form-title-2">
                Feel free to drop us a line below!
            </span>
        </div>

        <form class="contact100-form validate-form">
            <div class="wrap-input100 validate-input" data-validate="Name is required">
                <span class="label-input100">Full Name:</span>
                <input class="input100" type="text" name="name" placeholder="Enter full name">
                <span class="focus-input100"></span>
            </div>

            <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                <span class="label-input100">Email:</span>
                <input class="input100" type="text" name="email" placeholder="Enter email addess">
                <span class="focus-input100"></span>
            </div>

            <div class="wrap-input100 validate-input" data-validate="Phone is required">
                <span class="label-input100">Phone:</span>
                <input class="input100" type="text" name="phone" placeholder="Enter phone number">
                <span class="focus-input100"></span>
            </div>

            <div class="wrap-input100 validate-input" data-validate="Message is required">
                <span class="label-input100">Message:</span>
                <textarea class="input100" name="message" placeholder="Your Comment..."></textarea>
                <span class="focus-input100"></span>
            </div>

            <div class="container-contact100-form-btn">
                <button class="contact100-form-btn">
                    <span>
                        Submit
                        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>


服务菜单应在移动显示器上展开,但不会展开。

最佳答案

您点击的那一刻

<a href="ultherapy.html">some tekst</a>


浏览器将转到该页面,而不是打开子菜单。您需要Javascript的帮助来更改此行为。在Multilevel Dropdown in Bootstrap 3.3.5上尝试解决方案

关于jquery - 菜单在移动平台上无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57241208/

10-12 12:56
查看更多