Develop Reference

Toggle 'display:none' with JavaScript after transition?

I want to implement a dropdown menu for mobile devices with animation so when the transition ends, it needs to be display:none. Here's what I've done:
const menuButton = document.querySelector('.menuButton')
const navMenu = document.querySelector('.nav')
function menuToggle() {
if (navMenu.classList.contains('navDisplay')) {
navMenu.classList.remove('navShow')
setTimeout(() => {
navMenu.classList.remove('navDisplay')
}, 300)
} else {
navMenu.classList.add('navDisplay')
setTimeout(() => {
navMenu.classList.add('navShow')
}, 0)
}
}
menuButton.addEventListener('click', menuToggle)
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html, body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: 'Fredoka One', sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
display: none;
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
transition: height 300ms ease-in-out;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
height: 100vh;
}
.navDisplay {
display: block;
}
<header>
<div class="menuButton">☰</div>
<nav>
<p class="logo">LOGO</p>
<div class="nav">
<ul>
<li><div class="orderButton">ELEMENT1</div></li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>
So, the menu has display:none and height:0 by default. The click event listener triggers function that checks if menu is displayed or not and adds or removes respective classes (the display class removes after the transition ends with the help of timeout 400ms). Is there any more beautiful or less code solutions?

You are making it way more complex. You don't need to have a display:none and a height:0. height:0 with overflow:hidden will do the job. If you wanna show the links after the menu gets its height with a delay, you could use opacity. That and using the toggle function will make it as simple as this:
const menuButton = document.querySelector(".menuButton");
const navMenu = document.querySelector(".nav");
function menuToggle() {
navMenu.classList.toggle("navShow");
}
menuButton.addEventListener("click", menuToggle);
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html,
body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: "Fredoka One", sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
opacity:0;
transition: height 300ms ease-in-out,opacity 300ms 400ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
opacity:1;
height: 100vh;
}
<header>
<div class="menuButton">☰</div>
<nav>
<a href="index.html">
<p class="logo">LOGO</p>
</a>
<div class="nav">
<ul>
<li>
<div class="orderButton">ELEMENT1</div>
</li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>

Bootstrap data-toggle attribute not reverting back to old tab

Here is my codepen or view below the code.
If you click on a tab, its content will show successfully, then click on another tab, that content will also show successfully, however after that, if you go back to the previous tab that you just clicked, then that previous tab's content won't show, instead, the second tab's content will simply remain there. Why is this the case?
JS:
$k('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//new tab
console.log(e.target);
//previous tab
console.log(e.relatedTarget);
})
CSS:
/*nice Menu*/
.rotate {
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
a {
text-decoration: none;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pad-15 {
padding: 15px;
}
.clear {
clear: both;
}
.clear:after, .clear:before{
content: " ";
display: table;
}
a.toggle-nav {
top: 12px;
right: 15px;
position: absolute;
color: #fff;
line-height: 25px;
font-size: 22px;
background: #DE5939;
padding: 3px 5px;
border-radius: 1px;
transform: rotate(90deg);
}
.nice-nav {
width: 250px;
height: 100%;
transition:all 0.4s ease-in-out 0s;
float:left;
font-size: 15px;
}
.nice-nav li.child-menu span.toggle-right {
bottom: 0;
display: inline-block;
float: right;
padding: 15px;
position: absolute;
right: 0;
text-align: right;
top: 3px;
}
.nice-nav ul li a {
background: #fff none repeat scroll 0 0;
border: 1px solid #f6f6f6;
color: #333;
display: block;
padding: 12px;
position: relative;
}
.nice-nav ul li.child-menu ul {
background: #fff;
display: none;
}
.nice-nav ul li.child-menu ul li a {
background: #f6f6f6;
padding: 10px 20px;
}
.nice-nav > ul {
margin: 0;
padding: 0;
}
.nice-nav > ul li{
list-style: none;
margin: 2px auto;
}
.nice-nav ul li ul {
padding: 0;
}
.modal-backdrop.fade.show{
display: none;
}
/*nice Menu*/

You forgot to add nav in your ul class.
From your code from this:
<!--nice menu-->
<div class="nice-nav">
<ul>
To this:
<!--nice menu-->
<div class="nice-nav">
<ul class="nav d-block" aria-orientation="vertical">

Problem with css animation: position relative and value for left doesn't work apparently together

Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?

This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/

I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)

Transparent header on scroll to full colour - Nav overlay issue

Currently my site has a transparent navbar when on scroll will change to full colour. The issue i am having is that the navbar also switches colour when the page is scrolled on the fullscreen navigation.
How can i stop the navbar switching colour when the fullscreen navigation is open? Would i need to change me JS?
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar").css("background-color", "#dedede");
} else {
$(".navbar").css("background-color", "transparent");
}
})
});
body {
background: black;
}
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #fff;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #ffffff;
}
.btn-close:after {
color: #fff;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #ffffff;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0, 0.96);
}
.overlay .menu {
margin: 15% auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 50%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #ffffff;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)">
<span>MENU</span>
</a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Branding</li>
<li class="description"><span>Brand Development, Logos, Point, Point</span></li>
<li>Digital</li>
<li class="description"><span>Website Design, Website Development, Point, Point</span></li>
<li>Print</li>
<li class="description"><span>Business Cards, Leaflets, Point, Point</span></li>
<li>Packaging</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Infographics</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>About</li>
<li class="description"><span>About Company</span></li>
<li>Work</li>
<li class="description"><span>Examples & Case Studies of our work</span></li>
<li>Contact</li>
<li class="description"><span>Get in touch with us to get your project started</span></li>
</ul>
</li>
<li id="social">
<ul class="contact">
<p class="email">info#company.com</p>
<p class="tel">01234 566545</p>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
https://codepen.io/whitinggg/pen/bLzxGG

You can stop the navbar switching color when the fullscreen navigation by small editing in your script like this
change your script like this
$(document).ready(function () {
$(".menu-btn a").click(function () {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if( $(this).hasClass('btn-close') ) {
$(".navbar").css("background-color", "transparent");
}
else if( scroll > 100) {
$(".navbar").css("background-color", "#dedede");
}
});
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#dedede");
}
} else {
$(".navbar").css("background-color", "transparent");
}
});
});

You may consider adding an !important to the background style in order to always keep it transparent:
.navbar.fixed-top {
background:transparent!important;
}

Z-index issue on navbar

I'm having some issues with my navbar menu for my site. I want to have the main menu, a sub menu and a sub menu to that. So 3 levels total.
So far I have gotten the 2 levels to work, but I cannot get the 3rd level to go under the 2nd with z-indexing. Currently they are only on the same index it appears.
Anything I've tried messes up with the jQuery script I did for displaying the select instead of the menu when on small screens.
So how can I do this?
Fiddle (Go Products > Oticon).
HTML
<header>
<select class="menu_mobile_top">
<option>Home</option>
<option>Services</option>
<option>Products</option>
<option>Shop</option>
<option>Prices</option>
<option>About</option>
<option>Contact</option>
</select>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul class="subnav">
<li role="presentation">Service 1
<li role="presentation">Service 2
<li role="presentation">Service 3
</ul>
</li>
<li role="presentation">Products
<ul class="subnav">
<li role="presentation">Phonak</li>
<li role="presentation">ReSound</li>
<li role="presentation">Siemens</li>
<li role="presentation">Starkey</li>
<li role="presentation">Widex</li>
<li role="presentation">Oticon
<ul class="subnavoptions">
<li role="presentation">Test1</li>
<li role="presentation">Test 2</li>
</ul>
</li>
<li role="presentation">Unitron</li>
<li role="presentation">Bernafon</li>
</ul>
</li>
<li role="presentation">Shop</li>
<li role="presentation">Prices</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</header>
CSS
body {
font-size: 0;
text-align: center;
background-image: url('../images/bg.png');
background-repeat: repeat;
font-family: 'Montserrat', sans-serif;
}
header {
width: 100%;
height: 50px;
background: #304770;
z-index: 10;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 34pt;
}
a {
text-decoration: none;
color: inherit;
}
nav {
position: relative;
width: 100%;
z-index: 10;
}
a:hover {
text-decoration: none;
color: inherit;
}
::-webkit-input-placeholder {
color: #99C2EC;
}
:-moz-placeholder { /* Firefox 18- */
color: #99C2EC;
}
::-moz-placeholder { /* Firefox 19+ */
color: #99C2EC;
}
:-ms-input-placeholder {
color: #99C2EC;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.logo-div {
padding: 15px 0 10px;
}
.logo-div div {
display: inline-block;
width: 50%;
font-size: 14px;
color: #304770;
}
.center {
margin: 0 auto;
}
.nav-offset {
display: inline-block;
}
.nav {
height: 50px;
display: block;
position: relative;
list-style: none;
background: #304770;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
position: static;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav > li.active > a:before {
width: 100%;
}
.nav li:hover > a {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav > li > a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
transition: width 0.2s;
}
.nav > li:nth-last-of-type(1) > a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav > li > a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.nav li:hover .subnav {
top: 49px;
}
.subnav {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 12px;
z-index: -1;
left: 0;
margin: 0;
padding: 0;
background-color: #ccc;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnav > li {
display: inline-block;
background-color: #ccc;
margin: 0;
padding: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.subnav li:hover .subnavoptions {
top: 36px;
}
.subnavoptions {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 0px;
z-index: -2;
left: 0;
margin: 0;
padding: 0;
background-color: #EFEFEF;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnavoptions li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnavoptions li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.menu_mobile_top {
display: none;
position: relative;
font-size: 16px;
top: 5px;
background-color: #2A333F;
border: 1px solid transparent;
color: #EFEFEF;
width: 250px;
margin: 5px 0;
padding: 3px;
}
.menu_mobile_top:focus, option:focus {
outline: none !important;
border-color: orange;
}

I don't see the styles defined for third level menu. Add the following and try.
.subnavoptions li a li{
top:50px;
}