菜单在移动平台上无法正常工作

Question

When I view my website on mobile platforms such as mobile phones, the menu selection for Services doe not drop down but it does on larger screens such as laptops and larger

I have tried the code on Codepen and it works fine, but it does not work on my site.

/* Menu Styles */

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

The services menu should expand on mobile displays but it does not expand.

Answer 1

The moment you tap on

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

the browser goes to that page instead of opening the submenu. You need some help from Javascript to change this behaviour. Try solution on Multilevel Dropdown in Bootstrap 3.3.5

Answer 2

This sounds like an issue with the scale of your webpage. Larger screens, like laptop computers are obviously bigger than smaller screens like an iPhone. The webpage does not change its scale unless it has been told to, and from looking at your code I am reasonably sure this might be the problem. Try this line of code in the META section and see if it helps.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
***<meta name="viewport" content="width=device-width, initial-scale=1.0">***
<title>TEST</title>

The bold line of code tells the computer/phone to change the scale depending on the device accessing the content. So, it will change to look more or less how it looks on your laptop on your phone. Hope this helps.