Jquery 非画布移动导航-渲染期间闪烁

网站的实时链接：

JSFiddle： *请注意，JS Fiddle包含正在进行类切换和其他操作的java，但是当将视口缩小到移动大小时，它的行为并不太好。使用上面的实时链接可以更好地进行视觉理解

背景故事： 我已经为我的网站开发了一个非画布移动菜单，除了一些jquery类切换之外，它只使用CSS。导航是使用PHP动态生成的。最初，当我创建这个导航时，我有两个单独的导航实例，它们为同一个导航生成了两组HTML。一个是使用

生成的，另一个是使用

生成的

HTML的

集是为导航的全宽桌面版本设计的。

HTML集是使用媒体查询为该网站的移动版设计的。使用媒体查询，我只需隐藏桌面大小的移动版本，然后在移动媒体查询中隐藏桌面版本，并将#nav设置为

display:block

这是完美的工作没有图形问题或问题

当前故事：

/* 01. MAIN NAVIGATION STYLES */

#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

nav { /* THIS HAS BEEN RESET BELOW */
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

nav ul li a:visited {
    color: #777;
}

nav > ul > li:hover > a {  /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */
    color: #fff;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')";
    background-image: -moz-linear-gradient(top, #555555, #4c4c4c);
    background-image: -ms-linear-gradient(top, #555555, #4c4c4c);
    background-image: -o-linear-gradient(top, #555555, #4c4c4c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c));
    background-image: -webkit-linear-gradient(top, #555555, #4c4c4c);
    background-image: linear-gradient(top, #555555, #4c4c4c);
}

nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}






/* Sub nav styles start here */

nav ul li > ul { /* BASIC STYLING PLUS HIDE */  /* THIS HAS BEEN RESET BELOW */
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li ul li { /* THIS HAS BEEN RESET */
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

nav ul li ul li a {
    color: #777;
    height: 24px;
    padding: 8px 12px;
    margin: 0;
    background: #fafafa;
}

nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */
    color: #777;
    text-decoration: none;
    background: #fff;
    border-left: 5px solid #555;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}


/* SECOND LEVEL SUB NAV STYLES */

nav ul li ul li ul {
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: -2px;
    left: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul li ul li:hover > ul {
    display: block;
}

nav ul li .active {
    color: #fff;
    background: #8dc63f;
    background: -moz-linear-gradient(top,  #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c),            color-stop(51%,#81b539), color-stop(100%,#78a934));
    background: -webkit-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -o-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -ms-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: linear-gradient(to bottom,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );
}

nav ul li a.active {
    color: #fff;
}


nav ul li a span.arrow {
    background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%;
    width: 9px;
    height: 9px;
    display: inline-block;
    overflow: hidden;
    margin-left: 10px;
    text-indent: -999em;
}

nav ul li ul li a span.arrow {
    text-align: right;
    text-indent: -999em;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 9px;
    height: 9px;
    top: 16px;
    left: 100px;
    margin-left: 20%;
    background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;
}

nav ul li ul li a:hover span.arrow {
    left: 105px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}



/* Mobile nav buttons */

.nav-btn {
  display: block;
  width: 1.6em;
  height: 25px;
  padding: -11px;
  border: 0;
  outline: none;
  background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
    background-image: url("../../../images/nav/nav-icon.png");
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.close-btn {
  display: block;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: url('../../../images/nav/close-btn.svg') left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../../../images/nav/close-btn.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}







@media all and (min-width: 641px) {

.horizontal-mobile-nav {
    display: none;
}

} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */


@media all and (max-width: 640px) {

/* 3.0 MOBILE-NAV STYLES
-------------------------------*/
/* SET VISIBLE THE HORIZONTAL MOBILE NAV */

#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

.horizontal-mobile-nav {
    display: block;
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

.horizontal-mobile-nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

.horizontal-mobile-nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.horizontal-mobile-nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.horizontal-mobile-nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}

/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */
nav { height: auto; border: none; border-radius: 0; background-image: none); }
nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }
nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }
nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }
nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }
nav ul li a:visited { color: #777; }
nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}
nav > ul > li:nth-child(1) > a { border-radius: 0; }
/* Sub nav styles start here */
nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }
nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }
nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SECOND LEVEL SUB NAV STYLES */
nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li .active { color: #fff; background: none; }



/* Mobile Nav styles */  /* actual media query stuff from old nav */
nav ul li a span.arrow {
    display: none;
}

nav ul li ul li a span.arrow {
    display: none;
}

#nav {
    position: absolute;
    top: 0;
    padding-top: 100px;
}

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

#nav:target .close-btn {
    display: block;
}

#nav .close-btn {
    position: absolute;
    top: 20px;
    left: 40px;
}

#nav .block {
    position: relative;
    padding: 0;
}


#nav > ul {
    border-bottom: 1px solid #444;
    box-shadow:         0px 15px 15px rgba(8, 8, 8, 0.75);
}

#nav li {
    position: relative;
    padding: 0;
    margin: 0;
}

#nav ul li:last-child {
}

#nav ul li ul li:last-child {
    border-bottom: none;
}

#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}

#nav li a { /* BUTTON STYLES AND SIZE */
    text-decoration: none;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;  
}

#nav ul li a {
    background: #222222;
    background: -moz-linear-gradient(left,  #222222 0%, #222222 40%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222),      color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -o-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -ms-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: linear-gradient(to right,  #222222 0%,#222222 40%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80);
}

#nav li a:hover {
    color: #fff;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 40);
    filter: alpha(opacity = 40);
}

#nav ul li ul li a {  /* INDENT SUBNAV ITEMS */
    padding-left: 35px;
}

#nav ul li ul li a:hover {

}

#nav ul li ul li ul li a {
    padding-left: 50px;
}

#nav ul li ul li ul li a:hover {

}



/* crazy shit */

.js-ready #nav {
    height: 100%;
    width: 70%;
    background: url(../../../images/nav/hixs_pattern_evolution.png);
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}

.js-ready #nav .block {
    background: transparent;
}

.js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.js-ready #nav { /* move the nav off canvas */
    left: -70%;
}

.js-ready #canvas {
    left: 0;
}

.js-nav #inner-wrap {
    left: 70%;
}

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}

.csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

}

<section class="nav-container">

        <section class="horizontal-mobile-nav">
            <ul>
                <li class="mobile-nav-btn">
                    <a class="nav-btn" id="nav-open-btn" href="#nav">Mobile Navigation</a>
                </li>
                <li>
                    <a href="index.php">Home</a>
                </li>
            </ul>
        </section>

        <nav id="nav">


        <?php
            echo "<ul>";
                foreach ($nav_array as $nav_title => $nav_data) {

                    echo buildLinks($nav_title, $nav_data, $base, $title);
                }
            echo "</ul>";
        ?>

        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>

        </nav>
        </section><!-- end nav container -->

现在，我已经将两个独立的导航整合到一个更具弹性的PHP结构中。这就是说，使用一组HTML并对其进行不同样式的移动等操作更容易、更高效

我复制了这个站点，并煞费苦心地将移动类更改为相对的
nav>ul>li>ul
选择器。（不再使用nav的ID，因为我有一套HTML，我必须让桌面和手机为一套HTML工作）

出于某种原因，现在在任何移动设备上加载站点时（甚至桌面浏览器缩小到移动大小），当您加载页面时，您可以看到页面上加载的导航链接随后消失，因此出现了“flash”

我已尝试将整个导航设置为
display:none在媒体查询的“我的样式”顶部，然后
显示：块在媒体查询样式的底部，我认为我可以隐藏导航，直到它设置样式并将其移出画布，然后在该点之后将其设置为块，以便使其“重新显示”，即使它将离开屏幕。但是没有用。。。这是行不通的

我正在寻找此flash的修复程序，我并不特别关心它是如何完成的，只要它不使用两组单独的HTML恢复到以前的结构。

***请注意，下面的CSS确实引用了ID#nav。这是准确的，我没有删除ID，我只是没有使用它来设计大部分导航。nav HTML结构是子菜单nav的标准结构。UL-LI-A，UL在LI的内部等

CSS:

/* 01. MAIN NAVIGATION STYLES */

#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

nav { /* THIS HAS BEEN RESET BELOW */
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

nav ul li a:visited {
    color: #777;
}

nav > ul > li:hover > a {  /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */
    color: #fff;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')";
    background-image: -moz-linear-gradient(top, #555555, #4c4c4c);
    background-image: -ms-linear-gradient(top, #555555, #4c4c4c);
    background-image: -o-linear-gradient(top, #555555, #4c4c4c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c));
    background-image: -webkit-linear-gradient(top, #555555, #4c4c4c);
    background-image: linear-gradient(top, #555555, #4c4c4c);
}

nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}






/* Sub nav styles start here */

nav ul li > ul { /* BASIC STYLING PLUS HIDE */  /* THIS HAS BEEN RESET BELOW */
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li ul li { /* THIS HAS BEEN RESET */
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

nav ul li ul li a {
    color: #777;
    height: 24px;
    padding: 8px 12px;
    margin: 0;
    background: #fafafa;
}

nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */
    color: #777;
    text-decoration: none;
    background: #fff;
    border-left: 5px solid #555;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}


/* SECOND LEVEL SUB NAV STYLES */

nav ul li ul li ul {
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: -2px;
    left: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul li ul li:hover > ul {
    display: block;
}

nav ul li .active {
    color: #fff;
    background: #8dc63f;
    background: -moz-linear-gradient(top,  #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c),            color-stop(51%,#81b539), color-stop(100%,#78a934));
    background: -webkit-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -o-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -ms-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: linear-gradient(to bottom,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );
}

nav ul li a.active {
    color: #fff;
}


nav ul li a span.arrow {
    background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%;
    width: 9px;
    height: 9px;
    display: inline-block;
    overflow: hidden;
    margin-left: 10px;
    text-indent: -999em;
}

nav ul li ul li a span.arrow {
    text-align: right;
    text-indent: -999em;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 9px;
    height: 9px;
    top: 16px;
    left: 100px;
    margin-left: 20%;
    background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;
}

nav ul li ul li a:hover span.arrow {
    left: 105px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}



/* Mobile nav buttons */

.nav-btn {
  display: block;
  width: 1.6em;
  height: 25px;
  padding: -11px;
  border: 0;
  outline: none;
  background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
    background-image: url("../../../images/nav/nav-icon.png");
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.close-btn {
  display: block;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: url('../../../images/nav/close-btn.svg') left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../../../images/nav/close-btn.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}







@media all and (min-width: 641px) {

.horizontal-mobile-nav {
    display: none;
}

} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */


@media all and (max-width: 640px) {

/* 3.0 MOBILE-NAV STYLES
-------------------------------*/
/* SET VISIBLE THE HORIZONTAL MOBILE NAV */

#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

.horizontal-mobile-nav {
    display: block;
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

.horizontal-mobile-nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

.horizontal-mobile-nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.horizontal-mobile-nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.horizontal-mobile-nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}

/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */
nav { height: auto; border: none; border-radius: 0; background-image: none); }
nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }
nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }
nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }
nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }
nav ul li a:visited { color: #777; }
nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}
nav > ul > li:nth-child(1) > a { border-radius: 0; }
/* Sub nav styles start here */
nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }
nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }
nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SECOND LEVEL SUB NAV STYLES */
nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li .active { color: #fff; background: none; }



/* Mobile Nav styles */  /* actual media query stuff from old nav */
nav ul li a span.arrow {
    display: none;
}

nav ul li ul li a span.arrow {
    display: none;
}

#nav {
    position: absolute;
    top: 0;
    padding-top: 100px;
}

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

#nav:target .close-btn {
    display: block;
}

#nav .close-btn {
    position: absolute;
    top: 20px;
    left: 40px;
}

#nav .block {
    position: relative;
    padding: 0;
}


#nav > ul {
    border-bottom: 1px solid #444;
    box-shadow:         0px 15px 15px rgba(8, 8, 8, 0.75);
}

#nav li {
    position: relative;
    padding: 0;
    margin: 0;
}

#nav ul li:last-child {
}

#nav ul li ul li:last-child {
    border-bottom: none;
}

#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}

#nav li a { /* BUTTON STYLES AND SIZE */
    text-decoration: none;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;  
}

#nav ul li a {
    background: #222222;
    background: -moz-linear-gradient(left,  #222222 0%, #222222 40%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222),      color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -o-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -ms-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: linear-gradient(to right,  #222222 0%,#222222 40%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80);
}

#nav li a:hover {
    color: #fff;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 40);
    filter: alpha(opacity = 40);
}

#nav ul li ul li a {  /* INDENT SUBNAV ITEMS */
    padding-left: 35px;
}

#nav ul li ul li a:hover {

}

#nav ul li ul li ul li a {
    padding-left: 50px;
}

#nav ul li ul li ul li a:hover {

}



/* crazy shit */

.js-ready #nav {
    height: 100%;
    width: 70%;
    background: url(../../../images/nav/hixs_pattern_evolution.png);
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}

.js-ready #nav .block {
    background: transparent;
}

.js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.js-ready #nav { /* move the nav off canvas */
    left: -70%;
}

.js-ready #canvas {
    left: 0;
}

.js-nav #inner-wrap {
    left: 70%;
}

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}

.csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

}

<section class="nav-container">

        <section class="horizontal-mobile-nav">
            <ul>
                <li class="mobile-nav-btn">
                    <a class="nav-btn" id="nav-open-btn" href="#nav">Mobile Navigation</a>
                </li>
                <li>
                    <a href="index.php">Home</a>
                </li>
            </ul>
        </section>

        <nav id="nav">


        <?php
            echo "<ul>";
                foreach ($nav_array as $nav_title => $nav_data) {

                    echo buildLinks($nav_title, $nav_data, $base, $title);
                }
            echo "</ul>";
        ?>

        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>

        </nav>
        </section><!-- end nav container -->

HTML/PHP:

/* 01. MAIN NAVIGATION STYLES */

#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

nav { /* THIS HAS BEEN RESET BELOW */
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

nav ul li a:visited {
    color: #777;
}

nav > ul > li:hover > a {  /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */
    color: #fff;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')";
    background-image: -moz-linear-gradient(top, #555555, #4c4c4c);
    background-image: -ms-linear-gradient(top, #555555, #4c4c4c);
    background-image: -o-linear-gradient(top, #555555, #4c4c4c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c));
    background-image: -webkit-linear-gradient(top, #555555, #4c4c4c);
    background-image: linear-gradient(top, #555555, #4c4c4c);
}

nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}






/* Sub nav styles start here */

nav ul li > ul { /* BASIC STYLING PLUS HIDE */  /* THIS HAS BEEN RESET BELOW */
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li ul li { /* THIS HAS BEEN RESET */
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

nav ul li ul li a {
    color: #777;
    height: 24px;
    padding: 8px 12px;
    margin: 0;
    background: #fafafa;
}

nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */
    color: #777;
    text-decoration: none;
    background: #fff;
    border-left: 5px solid #555;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}


/* SECOND LEVEL SUB NAV STYLES */

nav ul li ul li ul {
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: -2px;
    left: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul li ul li:hover > ul {
    display: block;
}

nav ul li .active {
    color: #fff;
    background: #8dc63f;
    background: -moz-linear-gradient(top,  #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c),            color-stop(51%,#81b539), color-stop(100%,#78a934));
    background: -webkit-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -o-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -ms-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: linear-gradient(to bottom,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );
}

nav ul li a.active {
    color: #fff;
}


nav ul li a span.arrow {
    background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%;
    width: 9px;
    height: 9px;
    display: inline-block;
    overflow: hidden;
    margin-left: 10px;
    text-indent: -999em;
}

nav ul li ul li a span.arrow {
    text-align: right;
    text-indent: -999em;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 9px;
    height: 9px;
    top: 16px;
    left: 100px;
    margin-left: 20%;
    background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;
}

nav ul li ul li a:hover span.arrow {
    left: 105px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}



/* Mobile nav buttons */

.nav-btn {
  display: block;
  width: 1.6em;
  height: 25px;
  padding: -11px;
  border: 0;
  outline: none;
  background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
    background-image: url("../../../images/nav/nav-icon.png");
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.close-btn {
  display: block;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: url('../../../images/nav/close-btn.svg') left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../../../images/nav/close-btn.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}







@media all and (min-width: 641px) {

.horizontal-mobile-nav {
    display: none;
}

} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */


@media all and (max-width: 640px) {

/* 3.0 MOBILE-NAV STYLES
-------------------------------*/
/* SET VISIBLE THE HORIZONTAL MOBILE NAV */

#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

.horizontal-mobile-nav {
    display: block;
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

.horizontal-mobile-nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

.horizontal-mobile-nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.horizontal-mobile-nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.horizontal-mobile-nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}

/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */
nav { height: auto; border: none; border-radius: 0; background-image: none); }
nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }
nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }
nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }
nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }
nav ul li a:visited { color: #777; }
nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}
nav > ul > li:nth-child(1) > a { border-radius: 0; }
/* Sub nav styles start here */
nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }
nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }
nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SECOND LEVEL SUB NAV STYLES */
nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li .active { color: #fff; background: none; }



/* Mobile Nav styles */  /* actual media query stuff from old nav */
nav ul li a span.arrow {
    display: none;
}

nav ul li ul li a span.arrow {
    display: none;
}

#nav {
    position: absolute;
    top: 0;
    padding-top: 100px;
}

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

#nav:target .close-btn {
    display: block;
}

#nav .close-btn {
    position: absolute;
    top: 20px;
    left: 40px;
}

#nav .block {
    position: relative;
    padding: 0;
}


#nav > ul {
    border-bottom: 1px solid #444;
    box-shadow:         0px 15px 15px rgba(8, 8, 8, 0.75);
}

#nav li {
    position: relative;
    padding: 0;
    margin: 0;
}

#nav ul li:last-child {
}

#nav ul li ul li:last-child {
    border-bottom: none;
}

#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}

#nav li a { /* BUTTON STYLES AND SIZE */
    text-decoration: none;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;  
}

#nav ul li a {
    background: #222222;
    background: -moz-linear-gradient(left,  #222222 0%, #222222 40%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222),      color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -o-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -ms-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: linear-gradient(to right,  #222222 0%,#222222 40%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80);
}

#nav li a:hover {
    color: #fff;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 40);
    filter: alpha(opacity = 40);
}

#nav ul li ul li a {  /* INDENT SUBNAV ITEMS */
    padding-left: 35px;
}

#nav ul li ul li a:hover {

}

#nav ul li ul li ul li a {
    padding-left: 50px;
}

#nav ul li ul li ul li a:hover {

}



/* crazy shit */

.js-ready #nav {
    height: 100%;
    width: 70%;
    background: url(../../../images/nav/hixs_pattern_evolution.png);
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}

.js-ready #nav .block {
    background: transparent;
}

.js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.js-ready #nav { /* move the nav off canvas */
    left: -70%;
}

.js-ready #canvas {
    left: 0;
}

.js-nav #inner-wrap {
    left: 70%;
}

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}

.csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

}

<section class="nav-container">

        <section class="horizontal-mobile-nav">
            <ul>
                <li class="mobile-nav-btn">
                    <a class="nav-btn" id="nav-open-btn" href="#nav">Mobile Navigation</a>
                </li>
                <li>
                    <a href="index.php">Home</a>
                </li>
            </ul>
        </section>

        <nav id="nav">


        <?php
            echo "<ul>";
                foreach ($nav_array as $nav_title => $nav_data) {

                    echo buildLinks($nav_title, $nav_data, $base, $title);
                }
            echo "</ul>";
        ?>

        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>

        </nav>
        </section><!-- end nav container -->








问题在于您的导航可能处于三种状态：


桌面布局
移动布局
移动布局（禁用JavaScript）

您看到的闪光是第三种状态下导航的样式。该脚本添加了类
jsready
，只有这样，您的导航才会从画布中拉出

修复非常简单，您已经拥有了大部分CSS。CSS文件的第396行是：

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

这样做的目的是提供一个非JS回退。尝试在上关闭JavaScript，您将看到移动导航仍然可以通过使用
：target
伪类来工作。修复方法是将这些行添加到上述选择器：

overflow: hidden;
padding: 0;

然后，当您为JavaScript版本（样式表的第532行）应用样式时，重置这些属性：

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    overflow: visible;
    padding-top: 100px;
    ...
}

唯一剩下的事情是（如果你认为它是一个优先事项），那就是修复第三个状态（你的移动布局没有JavaScript）。你已经有了Modernizer和大部分款式，所以这应该不会太难。
太棒了！修复工作完美，无js回退现在并不重要。我可能会在某个时候修复它，但很少有人会看到这一点。还剩6小时，然后+50。谢谢没问题-我最近碰巧在同一篇文章的基础上实现了一个非常类似的nav，所以目前我对这里的CSS非常熟悉！美好的这是一篇很棒的文章，也是一篇很棒的导航。这是我唯一的问题。