Develop Reference

Hiding submenus in an animated sidebar

I'm trying to create an animated sidebar using CSS and JS, and I'm having an issue with hiding submenus (green in the demo). So, the submenus should fly out slowly like it is now, but only when parent <li> is hovered. Currently, they are always present. Also, list items below the hovered <li> should move down appropriately. In this scenario, when 'Transactions' is hovered, transactions submenu should appear slowly and take up space so 'Budgets' moves down accordingly. I have tried something with display: none; and display: block; but I've read that animations don't work on display property and couldn't get it to work, and I would really like to keep the animation. I have also tried something with visibility but failed, not worth mentioning.
document.addEventListener('DOMContentLoaded', () => {
let listItems = document.querySelectorAll('nav > ul > li');
function onListItemClick() {
for (let listItem of listItems) {
listItem.classList.remove('active');
listItem.children[0].classList.remove('dot');
if (listItem.children.length > 2) {
listItem.children[2].style.display = 'none';
}
}
this.classList.add('active');
this.children[0].classList.add('dot');
if (this.children.length > 2) {
this.children[2].style.display = 'block';
}
}
listItems.forEach(function(listItem) {
listItem.addEventListener('click', onListItemClick);
});
});
.sidebar {
background-color: #F2F2F2;
width: 300px;
height: 100%;
position: fixed;
font-family: sans-serif;
}
.sidebar>nav>ul {
list-style: none;
line-height: 2em;
padding: 0;
margin: 10em 0 0 0;
}
.sidebar>nav>ul>li {
display: grid;
grid-template-columns: 25px 1fr;
color: #959595;
font-size: 18px;
}
.sidebar>nav>ul>li>span:nth-child(1) {
margin-left: 3em;
}
.sidebar>nav>ul>li>span:nth-child(2) {
padding: 0.5em 0 0.5em 3em;
}
.sidebar>nav>ul>li:hover {
color: #757575;
font-weight: bold;
cursor: pointer;
}
.sidebar>nav>ul>li>ul {
z-index: 9;
position: absolute;
list-style: none;
padding: 0;
margin: 0;
width: 300px;
transform: translateY(0);
transition: all 0.5 ease;
}
.sidebar>nav>ul>li:hover>ul {
transform: translateY(30%);
transition: all 0.5s ease;
}
.sidebar>nav>ul>li>ul>li {
display: block;
box-sizing: border-box;
background-color: #33ad93;
font-size: 14px;
width: 100%;
font-weight: normal;
padding: 0 0 0 5.5em;
}
.sidebar>nav>ul>li>ul>li:first-child {
padding: 0.5em 0 0 5.5em;
}
.sidebar>nav>ul>li>ul>li:last-child {
padding: 0 0 0.5em 5.5em;
}
.sidebar>nav>ul>li>ul>li:not(:first-child):not(:last-child) {
padding: 0.15em 0 0.15em 5.5em;
}
.sidebar>nav>ul>li>ul>li>a {
color: white;
}
.sidebar>nav>ul>li>span>a {
color: #959595;
text-decoration: none;
}
.dot {
border-radius: 50%;
background-color: #33ad93;
width: 10px;
height: 10px;
display: inline-block;
margin: auto;
}
.active {
color: black !important;
font-weight: bold;
}
<div class="sidebar">
<nav>
<ul>
<li class=" active ">
<span class=" dot "></span>
<span>Dashboard</span>
</li>
<li class="">
<span class=""></span>
<span>Transactions</span>
<ul>
<li>New Transaction</li>
<li>View Transactions</li>
</ul>
</li>
<li class="">
<span class=""></span>
<span>Budgets</span>
</li>
</ul>
</nav>
</div>
How can I overcome the issue?

I made a few small changes which seems to accomplish what you want:
.sidebar > nav > ul > li > ul {
z-index: 9;
/*position: absolute; *removed*/
height: 0; /*added*/
list-style: none;
padding: 0;
margin: 0;
width: 300px;
/*transform: translateY(0); *removed*/
/*transition: all 0.5 ease; *removed*/
overflow-y: hidden; /*added*/
}
.sidebar > nav > ul > li:hover > ul {
/*transform: translateY(30%); *removed*/
height: 80px; /*added*/
transition: height 0.5s ease; /*modified*/
}
.sidebar > nav > ul > li > ul > li {
height: 40px; /*added*/
display: block;
box-sizing: border-box;
background-color: #33ad93;
font-size: 14px;
width: 100%;
font-weight: normal;
padding: 0 0 0 5.5em;
}
So I added a static height to each of the new dropdown's list items to 40px, then set the container to 80px. Then we transition the height rather than the Y position. If you want it to be dynamic relative to the number of elements, unfortunately it's not as easy as using height: 100% instead of height: 80px (you'll need to use some javascript to dynamically set the height relative to the number of list items; it will still work, but the transition will be slightly broken).
Hopefully this should give you an idea though

You have just missed unit for transition on default ul.
Here is updated code
document.addEventListener('DOMContentLoaded', () => {
let listItems = document.querySelectorAll('nav > ul > li');
function onListItemClick() {
for (let listItem of listItems) {
listItem.classList.remove('active');
listItem.children[0].classList.remove('dot');
if (listItem.children.length > 2) {
listItem.children[2].style.display = 'none';
}
}
this.classList.add('active');
this.children[0].classList.add('dot');
if (this.children.length > 2) {
this.children[2].style.display = 'block';
}
}
listItems.forEach(function(listItem) {
listItem.addEventListener('click', onListItemClick);
});
});
.sidebar {
background-color: #F2F2F2;
width: 300px;
height: 100%;
position: fixed;
font-family: sans-serif;
}
.sidebar > nav > ul {
list-style: none;
line-height: 2em;
padding: 0;
margin: 10em 0 0 0;
}
.sidebar > nav > ul > li {
display: grid;
grid-template-columns: 25px 1fr;
color: #959595;
font-size: 18px;
}
.sidebar > nav > ul > li > span:nth-child(1) {
margin-left: 3em;
}
.sidebar > nav > ul > li > span:nth-child(2) {
padding: 0.5em 0 0.5em 3em;
}
.sidebar > nav > ul > li:hover {
color: #757575;
font-weight: bold;
cursor: pointer;
}
.sidebar > nav > ul > li > ul {
z-index: 0;
height: 0px;
overflow-y: hidden;
list-style: none;
padding: 0;
margin: 0;
width: 300px;
transform: translateY(0);
transition: all 0.5s linear;
}
.sidebar > nav > ul > li:hover > ul {
height: 100%;
transform: translateY(0);
}
.sidebar > nav > ul > li > ul > li {
display: block;
box-sizing: border-box;
background-color: #33ad93;
font-size: 14px;
width: 100%;
font-weight: normal;
padding: 0 0 0 5.5em;
}
.sidebar > nav > ul > li > ul > li:first-child {
padding: 0.5em 0 0 5.5em;
}
.sidebar > nav > ul > li > ul > li:last-child {
padding: 0 0 0.5em 5.5em;
}
.sidebar > nav > ul > li > ul > li:not(:first-child):not(:last-child) {
padding: 0.15em 0 0.15em 5.5em;
}
.sidebar > nav > ul > li > ul > li > a {
color: white;
text-decoration: none;
}
.sidebar > nav > ul > li > ul > li > a:hover {
text-decoration: underline;
}
.sidebar > nav > ul > li > span > a {
color: inherit;
text-decoration: none;
}
.dot {
border-radius: 50%;
background-color: #33ad93;
width: 10px;
height: 10px;
display: inline-block;
margin: auto;
}
.active {
color: black !important;
font-weight: bold;
}
<div class="sidebar">
<nav>
<ul>
<li class=" active ">
<span class=" dot "></span>
<span>Dashboard</span>
</li>
<li class="">
<span class=""></span>
<span>Transactions</span>
<ul>
<li>New Transaction</li>
<li>View Transactions</li>
</ul>
</li>
<li class="">
<span class=""></span>
<span>Budgets</span>
</li>
</ul>
</nav>
</div>

You might want to check out the w3schools W3.CSS Framework page on CSS Sidebars.
The snippet below is an example using that framework. You can then tweak it to your style from there.
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card">
Dashboard
<div class="w3-dropdown-hover">
<button class="w3-button">Transactions
<span style="font-size:12px;padding-bottom:2px">▼</span>
</button>
<div class="w3-dropdown-content w3-bar-block" style="box-shadow: 0 0.25em 0.5em #00000040;">
New Transaction
View Transactions
</div>
</div>
Budgets
</div>

responsive horizontal menu with dropdown menus

I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>

Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();

Dropdown menu continues to stay after browser expanded

I have a responsive menu and I have some problems with it
if you run this code in your laptop in full screen format then change browser width below the breakpoint at 943px, menu changes to mobile format and in this case if you select for example "about option " it's dropdown appears. Howevere if you resize the screen back to full size without first closing "about" drop down, it did not disappear in full screen, it continues to stay even after the browser is fully expanded. and it looks messed up
any idea? thanks
/*global $ */
$(document).ready(function () {
"use strict";
$('.menu > ul > li:has( > ul)').addClass('');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > ul").before("");
$(".menu > ul > li").hover(function (e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").click(function () {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
$(".menu-mobile").click(function (e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
});
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
font-family: 'Source Sans Pro', sans-serif;
}
* {
box-sizing: border-box;
}
a {
color: #333;
}
.description {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-container {
width: 80%;
margin: 0 auto;
background: #e9e9e9;
}
.menu-mobile {
display: none;
padding: 20px;
}
.menu-mobile:after {
content: "\f394";
font-family: "Ionicons";
font-size: 2.5rem;
padding: 0;
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%);
}
.menu-dropdown-icon:before {
content: "\f489";
font-family: "Ionicons";
display: none;
cursor: pointer;
float: right;
padding: 1.5em 2em;
background: #fff;
color: #333;
}
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
box-sizing: border-box;
}
.menu > ul:before,
.menu > ul:after {
content: "";
display: table;
}
.menu > ul:after {
clear: both;
}
.menu > ul > li {
float: left;
background: #e9e9e9;
padding: 0;
margin: 0;
}
.menu > ul > li a {
text-decoration: none;
padding: 1.5em 3em;
display: block;
}
.menu > ul > li:hover {
background: #f0f0f0;
}
.menu > ul > li > ul {
display: none;
width: 100%;
background: #f0f0f0;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
content: "";
display: table;
}
.menu > ul > li > ul:after {
clear: both;
}
.menu > ul > li > ul > li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}
.menu > ul > li > ul > li a {
color: #777;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}
.menu > ul > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
content: "";
display: table;
}
.menu > ul > li > ul > li > ul:after {
clear: both;
}
.menu > ul > li > ul > li > ul > li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
}
.menu > ul > li > ul > li > ul > li a {
border: 0;
}
.menu > ul > li > ul.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
}
.menu > ul > li > ul.normal-sub > li {
width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (max-width: 959px) {
.menu-container {
width: 100%;
}
.menu-mobile {
display: block;
}
.menu-dropdown-icon:before {
display: block;
}
.menu > ul {
display: none;
}
.menu > ul > li {
width: 100%;
float: none;
display: block;
}
.menu > ul > li a {
padding: 1.5em;
width: 100%;
display: block;
}
.menu > ul > li > ul {
position: relative;
}
.menu > ul > li > ul.normal-sub {
width: 100%;
}
.menu > ul > li > ul > li {
float: none;
width: 100%;
margin-top: 20px;
}
.menu > ul > li > ul > li:first-child {
margin: 0;
}
.menu > ul > li > ul > li > ul {
position: relative;
}
.menu > ul > li > ul > li > ul > li {
float: none;
}
.menu .show-on-mobile {
display: block;
}
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>megamenu.js | Last responsive megamenu you'll ever need</title>
<meta name="description" content="">
<meta name="keywords" content="" />
<meta name="author" content="Mario Loncarek">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
window.Modernizr || document.write('<script src="js/vendor/modernizr-2.8.3.min.js"><\/script>')
</script>
</head>
<body>
<div class="menu-container">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School
<ul>
<li>Lidership</li>
<li>History</li>
<li>Locations</li>
<li>Careers</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Research
<ul>
<li>Undergraduate research</li>
<li>Masters research</li>
<li>Funding</li>
</ul>
</li>
<li>Something
<ul>
<li>Sub something</li>
<li>Sub something</li>
<li>Sub something</li>
<li>Sub something</li>
</ul>
</li>
</ul>
</li>
<li>News
<ul>
<li>Today</li>
<li>Calendar</li>
<li>Sport</li>
</ul>
</li>
<li>Contact
<ul>
<li>School
<ul>
<li>Lidership</li>
<li>History</li>
<li>Locations</li>
<li>Careers</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Empty sub</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="description">
<h3>megamenu.js - Last responsive megamenu you'll ever need</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
<script src="js/megamenu.js"></script>
</body>
</html>

If I understand what your problem is correctly, one way of doing what you want is by refreshing the webpage on resize.
Here is some JavaScript to do it:
window.addEventListener('resize', function(event) {
clearTimeout(resizeTimeout);
var resizeTimeout = setTimeout(function(){
window.location.reload();
}, 300);
});
UPDATE:
Since it's just a menu, it would not be ideal to refresh the whole page so another way is to reduce its z-index, read more about the z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Example:
Javascript:
var currentWidth ;
setInterval(function(){
currentWidth = window.innerWidth;
if(currentWidth < 983) { //983 or whatever threshold you want
document.getElementsByClassName(".menu-container").style.zIndex = -999; //set the value to -999 just to be sure :)
}
else{
document.getElementsByClassName(".menu-container").style.zIndex = 999;
}
}, 300);

The problem is that you can "open" multiple sub-menus in mobile mode via this code:
$(".menu > ul > li").click(function () {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
What you could do is add code that listens on the windows resize event and then fades the open menus. I did this with the following code. It remembers which sub-menu was opened and then on resize closes them:
var openSubMenu = undefined; // You want to store the open sub-menu here
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > ul").before("Navigation");
//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").hover(function (e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
$(".menu > ul > li").click(function () {
if ($(window).width() <= 943) {
var thisItem = $(this).children("ul");
if (openSubMenu && openSubMenu.get(0) != thisItem.get(0)) openSubMenu.fadeOut(0);
openSubMenu = thisItem;
openSubMenu.fadeToggle(150);
//$(this).children("ul").fadeToggle(150);
}
});
//When clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
$(".menu-mobile").click(function (e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
// When the window resizes clear any open windows
$(window).resize(() => {
if (openSubMenu && openSubMenu.css('display') === 'block') {
openSubMenu.fadeOut(0);
openSubMenu = undefined;
}
})
};

Why is the sub-menu in this accordion menu not staying open?

I adapted a menu from CSS MenuMaker, and I've been hunting for why it behaves differently. It is here. When you click on the menu item, the sub-menu opens, but if the mouse remains over the clicked menu item, the rest doesn't move down to make room, and the sub-menu doesn't use the styling it is supposed to. Instead it uses the styling of a top-level menu item.
HTML
<div class="col-2 col-m-2 accordian darkYellow roundLeft">
<p class="title">Melt-in-Place Station (MIP)
</p>
<ul>
<li class="has-sub"><a><span>Reference Docs</span></a>
<ul>
<li><a href="http://ntrs.nasa.gov/archive/nasa/casi.ntrs.nasa.gov/20150000305.pdf">
<span>Melted regolith construction</span></a></li>
</ul>
</li>
<li class="has-sub"><a><span>Forum Threads</span></a></li>
<li class="has-sub"><a><span>Models</span></a></li>
</ul>
</div>
CSS
.accordian,
.accordian ul,
.accordian li,
.accordian a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
text-decoration: none;
line-height: 1;
font-size: 1em;
position: relative;
color: yellow;
}
p.title {
font-weight: 600;
padding: 16px 6px;
}
.accordian a {
line-height: 1.3;
cursor: pointer;
}
.accordian {
font-weight: 400;
color: rgba(255, 255, 0, 1);
text-align: right;
}
.accordian > ul > li {
margin: 0 0 2px 0;
}
.accordian > ul > li:last-child {
margin: 0;
}
.accordian > ul > li > a {
font-size: 1.1em;
display: block;
background: rgba(50, 50, 50, 0.6);
}
.accordian > ul > li > a > span {
display: block;
padding: 6px 10px;
}
.accordian > ul > li > a:hover {
text-decoration: none;
}
.accordian > ul > li.active {
border-bottom: none;
}
.accordian > ul > li.active > a {
background: #333;
}
.accordian > ul > li.has-sub > a span {
background: url(http://www.moonwards.com/img/iconPlus.png) no-repeat left center;
}
.accordian > ul > li.has-sub.active > a span {
background: url(http://www.moonwards.com/img/iconMinus.png) no-repeat left center;
}
/* Sub menu */
.accordian ul ul {
padding: 5px 12px;
display: none;
}
.accordian ul ul li {
padding: 3px 0;
}
.accordian ul ul a {
display: block;
font-size: 0.9em;
font-weight: 400italic;
}
jQuery
( function( $ ) {
$( document ).ready(function() {
$('.accordian > ul > li > a').click(function() {
$('.accordian li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('.accordian ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
} )( jQuery );
I assume this is some dumb thing, but any help appreciated.

After inspecting I think I found the culprit. Try edit your CSS like this:
li:hover ul {
display: block;
position: relative; /* relative, not absolute */
top: 100%;
left: -10px;
background-color: rgba(50, 50, 0, 1);
font-size: 13px;
}

Your problem is not entirely CSS. I just figured out that the LI's height is covering the dropdown. However, if you reduce the height of the LI, the next LI doesn't open the amount it needs to. A quick patch would be to apply this CSS below however, I would much rather get the JQuery guys here to help you out.
.accordian ul ul {
padding: 5px 12px;
display: none;
margin-top: 0px;
z-index: 99999;
position: relative;
background: none;
}
p.s. This solves the problem you asked, but you need to tweak the font and size so that there is no difference

Nav dropdown hover flicker problems when reloading page with cursor over the tab

I have a problem with my dropdown Navbar it doesn't do it all the time. But if I reload the page and keep the cursor over the tab it will sometimes start flickering and flashing and the hover seem to mess up.
I have made a JSfiddle DEMO, but the dropdown isn't working on it not sure why I will also provide the code and webpage link were the dropdown does work.
Webpage Link Here. with kinda working dropdown.
HTML
<div style="padding-top:15px;">
<a class="toggleMenu" href="#">Menu</a> <!-- Mobile Nav -->
<ul class="nav">
<li>
refresh and keep cursor here
<ul>
<li>
somthing
<ul>
<li>Nothing</li>
<li>Nothing</li>
<li>Nothing</li>
</ul>
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
</ul>
</li>
</ul>
</div> <!-- Container-Nav End -->
<div style="background:#333; width:100%; height:500px;"></div>
CSS
.nav-wrapper {
max-width:1300px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.container-nav {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-top:18px;
padding-left: 20px;
}
.toggleMenu {
display: none;
background-color: #455357;
width: 35%;
padding: 15px 40px;
border-radius: 3px;
font-weight: 600;
font-size: 16px;
color: #fff;
float: right;
text-align: right;
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
display: block;
text-transform: uppercase;
color: #788083;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.02em;
transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.nav a:hover {
color:#d54572;
text-decoration: none;
}
/* first sub hover colors */
.nav li a:hover {
background: none;
}
/* second sub hover colors */
.nav li li a:hover {
background: #999;
}
/* active tab colors */
#active {
color:#d54572;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
/* first sub menu */
.nav li li a {
width: 127px;
background: #666;
color:#fff;
position: relative;
z-index:500;
border: 1px inset #fff;
display: block;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin-left:-40px;
}
/* second sub menu */
.nav li li li a {
background:#777;
z-index:500;
}
Javascript
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 801) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 801) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}