移动端导航栏菜单显示异常求助（附PHP/CSS代码）

我正在修复导航栏容器相关问题，已检查并调整HTML与CSS代码，现在移动端可显示导航栏，但菜单选项在小屏幕下会跑到页面底部，始终无法定位问题根源，恳请协助排查。

相关CSS代码 #

/* CSS overwrites for new navigation */
#nav li .drop {
    background: rgba(0, 0, 0, 0) url("images/dd-back.png") repeat scroll 0 0;
    height: auto;
    left: 0;
    top: 44px;
    padding-bottom: 20px;
    box-shadow: 1px 2px 10px rgba(0,0,0,.65);
    -moz-box-shadow: 1px 2px 10px rgba(0,0,0,.65);
    -webkit-box-shadow: 1px 2px 10px rgba(0,0,0,.65);   
border-radius: 0 0 3px 3px;
}
#nav li .drop2 {
    width: 496%;
}
#nav li .drop ul li {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-top: 0px solid #4f4e50;
    float: left;
    padding: 3px 19px 4px 18px;
    height: 24px;
}
#nav li .drop2 ul li {
    width: 42%;
}

.primary-menu li .sub-menu li a {
    color: #fdfdfe;
    display: block;
    font-family: myriad-pro,sans-serif;
    font-size: 15px;
    height: auto;
    line-height: 20px;
    padding: 3px 0px 4px 0px;
    text-shadow: none;
    background-image: none !important;
}

#nav li .drop ul li a:hover {
    background: #2d2d2f !important;
}




@media only screen and (max-device-width : 768px) { 

    .nav-holder{
    display:none;   
    }
    
    .site-header-menu{
    display:none;   
    }
    
    div{
    max-width:100% !important;  
    }
    
    img{
    max-width: 100% !important; 
    }
    
    body{
    max-width: 100% !important; 
        min-width:100% !important;

    }
    html{
    max-width: 100% !important; 
    }
    
    body, html, img, div, span, ul, h1, h2, h3, li, header, footer{
    max-width: 100% !important; 
    }
    
    .inner-page #twocolumns {
    background-image: none !important;
}
    
    .logo {
    margin: 0 0 15px 20px !important;
    
    background-image: url(images/logo.png) !important;

    max-width: 100% !important;
    background-size: 280px !important;
    background-repeat: no-repeat !important;
}
    .entry-header {
    background: #666;
    height: auto;
    position: relative;
    z-index: 2;
    padding: 10px 5px 1px 5px;
    margin-bottom: 20px;
}

    .header-box .box {
  
    height: auto !important;
    background: #ccc !important;
        max-width:100%;
        min-width:100%;
        text-align:center !important;
    
}
    
.header {
    width: 100% !important
    ;
}
}

相关PHP代码 #

<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php endif; ?>
    <?php wp_head(); ?>
    <script src="https://use.typekit.net/mzf6nuq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

     <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8444662-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>

<body <?php body_class(); ?>>
<div id="wrapper">
        <div id="header">
            <div class="header">
                <div class="top-nav">
                    <div class="holder">
                        <div class="frame">
<ul><li class="first"><a href="/" title="Home" >Home</a></li>
<li><a href="/" title="Employment" >Employment</a></li>
<li><a href="/" title="Email Us" >Email Us</a></li>
<li class="last"><a href="/search" title="Search" >Search</a></li>
</ul>
<form id="searchForm" action="search" method="post">
    <fieldset>
        <span class="text"><input type="text" name="customSearch" value="Search Site" /></span>
        <input type="submit" id="searchField" class="btn-search" value="Search" />
        <input type="hidden" name="id" value="56" />
    </fieldset>
</form>
                        </div>
                    </div>
                </div>
                
                <div class="header-box">
                    <h1 class="logo"><a href="/">We're the People</a></h1>
                    <div class="box">
                        <!--
<ul>
<li><strong>Call Us</strong> <span></span></li>
<li><strong>24 Service</strong> <span>Serving CT & NYC</span></li>
</ul>
-->
<ul>
<li><strong>24 Service</strong> <span>New York & CT<br /><a href="tel:"></a></span><span>New York<br /><a href=""></a></span></li>
</ul>

                  <!-- Begin Signup Form -->

                    </div>
                </div>
                <div class="nav-holder">
                
                <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
                    <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>
  
                    <div id="site-header-menu" class="site-header-menu">
                        <?php if ( has_nav_menu( 'primary' ) ) : ?>
                            <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
                                <?php
                                    wp_nav_menu( array(
                                        'theme_location' => 'primary',
                                        'menu_class'     => 'primary-menu',
                                     ) );
                                ?>
                            </nav><!-- .main-navigation -->
                        <?php endif; ?>

                    </div><!-- .site-header-menu -->
                <?php endif; ?>
            </div><!-- .site-header-main -->

            <?php if ( get_header_image() ) : ?>
                <?php
                
                    /**
                     * Filter the default twentysixteen custom header sizes attribute.
                     *
                     * @since Twenty Sixteen 1.0
                     *
                     * @param string $custom_header_sizes sizes attribute
                     * for Custom Header. Default '(max-width: 709px) 85vw,
                     * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.
                     */
                    $custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
                ?>
                <div class="header-image">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                    </a>
                </div><!-- .header-image -->
            <?php endif; // End header image check. ?>
               
                </div>

内容的提问来源于stack exchange，提问作者S J