Develop Reference

Can't hide a submenu on mobile and show it on click

It's has been answered in several ways I've found on StackOverflow, but can't get it to work on my Wordpress theme. Very new to js/JQuery, beginning when I started troubleshooting this. Here is my website.
Right now, my submenu for "WORK" opens on hover, which is ok on desktop, but on mobile screens below 767px, my nav menu changes into a button operated by this jQuery function, and my whole "WORK" submenu is open, listing everything out and taking up a lot of space:
(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
;
And when I add this code from this post, the whole menu button disappears on mobile and nothing is clickable:
$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
var $el = $('ul',this); // element to toggle
$('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
$el.stop(true, true).slideToggle(400); // toggle element
return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
e.stopPropagation(); // stop events from bubbling from sub menu clicks
});
});​
I have tried a few different ones, like this one, which also made the button disappear and seem to clash with the jQuery button code.
This PHP seems to define the navigation classes:
<?php
wp_nav_menu(array(
'container_id' => 'cssmenu',
'theme_location' => 'menu-1',
'fallback_cb' => 'gusto_photography_Menu_Walker::fallback',
'walker' => new Gusto_Photography_Menu_Walker(),
));
?>
with the corresponding CSS here:
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#cssmenu {
background: transparent;
margin: 0;
width: auto;
padding: 0;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#cssmenu ul {
list-style: none;
margin: 0 auto;
padding: 0;
float: none;
text-align: left;
padding-top: 15px;
}
#cssmenu ul:after,
#cssmenu:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu a {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
text-transform: uppercase;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
display: inline-block;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 0;
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #000;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
z-index: 9999;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: '';
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 7px 7px 7px 7px;
text-align: left;
}
#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
color: #777;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #eee;
}
#cssmenu ul li ul li:hover>ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu>ul>li {
display: block;
}
#cssmenu.align-center>ul>li {
float: none;
display: inline-block;
}
#cssmenu.align-center>ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right>ul {
float: right;
}
#cssmenu.align-right>ul>li:hover>ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover>ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu>ul>li:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 1px;
top: 0;
z-index: 0;
border-bottom: 0px solid #000;
background: transparent;
-webkit-transition: border-bottom .2s;
-moz-transition: border-bottom .2s;
-ms-transition: border-bottom .2s;
-o-transition: border-bottom .2s;
transition: border-bottom .2s;
}
#cssmenu>ul>li.has-sub>a {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
}
#cssmenu>ul>li.has-sub>a:after {
display: block;
content: '';
background: #ffffff;
height: 2px;
width: 12px;
margin: 10px 0 0;
position: absolute;
border-radius: 13px;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li.has-sub>a:before {
display: block;
content: '';
border: 4px solid transparent;
border-top-color: #000;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li>a {
color: #000;
padding:15px 15px 0;
padding-left: 0;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
z-index: 2;
position: relative;
}
#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
height: 100%;
}
#cssmenu>ul>li:hover>a {
color: #000;
}
#cssmenu>ul>li.active>a {
}
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
}
#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
border-top-color: #eee;
}
#cssmenu>ul>li:hover>ul {
left: 0;
}
#cssmenu>ul>li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu>ul>li>a {
width: auto;
display: inline-block;
}
#cssmenu>ul>li {
width: auto;
}
#cssmenu>ul>li>ul {
width: 170px;
display: block;
}
#cssmenu>ul>li>ul>li {
width: 170px;
display: block;
}
.main-navigation {
margin-bottom: 0em;
}
#media all and (max-width: 767px),
{
#cssmenu>ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu>ul>li>ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li>a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center>ul {
text-align: left;
}
#cssmenu.align-center>ul>li {
display: block;
}
#cssmenu>ul.open {
max-height: 1000px;
border-top: 0px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul>li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
padding: 6px;
text-align: center;
}
#cssmenu ul>li:after {
display: none;
}
#cssmenu ul li.has-sub>a:after,
#cssmenu ul li.has-sub>a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover>ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover>ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover>ul>li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #333;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover>a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
margin-top: 20px;
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #000;
cursor: pointer;
border: 2px solid #000;
}
#cssmenu #menu-button:after {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 26px;
}
}
I'm not sure why the jQuery I'm adding is not affecting it the submenu at all. Thank you for your help.

You can try to target the ul inside of the 'work' li item and use display:none to hide it. Then on click of the work li you can add and remove a class for example class="open" to close or open the submenu using jQuery.
<ul class="menu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li class="has-children">Click me!
<ul class="submenu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
The CSS would be something like this:
.menu {
.has-children {
color: red;
cursor:pointer;
&.open {
.submenu {
display:block;
}
}
}
& :nth-child(4n) {
ul {
display:none;
}
}
}
and the jQuery something like this:
$( document ).ready(function() {
$('.has-children').on('click', function(){
if ($('.has-children').hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
}
});
});
It will make more sense if you see it working.
I've put together a working example in the following link: https://codepen.io/Angel-SG/pen/JwXRZo

Drop Down Menu disappears when you move your mouse down to click

I am using Dreamweaver CS6 to help an organization set up their website. To save time on the menu bar, I used one at Menu Maker. It was a wee bit wider than I wanted with my menu buttons, but I went in and manually reduced the padding so that they all fit on the menu bar, as well as increasing the font. The drop down menus worked great at the site preview, but when I inserted all the html code where I wanted the bar, copied the script.js and the styles.css it into the files folder, the drop down menus disappear when you move your mouse cursor down to select one.
After having difficulty, I submitted a support ticket. I then did some searches and saw complaints by other users that there is no support, no contact.
I have tried to ascertain where the coding issue is, that is causing the drop down menu to disappear, am now going blind in code view. ;( I could really use and would appreciate some advice.
HTML
<div id="cssmenu">
<ul>
<li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i>
Home</a></li>
<li class="has-sub"><a href="about.htm"><i class="fa fa-fw fa-bars"></i>
About Us</a>
<ul>
<li>Contact Us</li>
<li>Organization</li>
</ul>
</li>
<li class="has-sub">Our Wild Bison Mission
<ul>
<li>Rationale</li>
<li>Montana Plans for Wild Bison</li>
<li>Wood Bison Example</li>
<li>Supporters</li>
<li>Polls</li>
<li>FWP Documents</li>
<li>Scientist's Letter of Support</li>
</ul>
</li>
<li class="has-sub">Why Wildness?
<ul>
<li>Biological Definitions</li>
<li>Legal Definitions</li>
</ul>
</li>
<li class="has-sub">Legal Issues
<ul>
<li>Wild Bison and the Law</li>
</ul>
</li>
<li class="has-sub">CMR/APR Bison Habitat
<ul>
<li>CMR</li>
<li>APR</li>
</ul>
</li>
<li>News</li>
<li>Contribute</li>
</ul>
</div>
Java
(function($){
$(document).ready(function(){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
})(jQuery);
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button ,
#cssmenu{
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu > ul:after ,
#cssmenu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 100;
width: 1102px;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #d5d69e;
background: -moz-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dedfb4), color-stop(100%, #c9ca81));
background: -webkit-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -o-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -ms-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: linear-gradient(to bottom, #dedfb4 0%, #c9ca81 100%);
}
#cssmenu > ul {
background: url('images/bg.png');
box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li {
float: left;
display: inline-block;
}
#cssmenu.align-center > ul {
float: none;
text-align: center;
font-size: 0;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li > a {
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 11px;
font-weight: 700;
color: #515223;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 19px;
padding-left: 10px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #d0d193;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #515223;
right: 17px;
top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ffffff;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
z-index: 9999;
padding-top: 6px;
font-size: 13px;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #ffffff;
top: -4px;
left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #ffffff;
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: #ffffff;
left: auto;
right: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 49px;
left: 0;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
left: 180px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 180px;
color: #777777;
background: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #333333;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #777777;
right: 17px;
top: 14px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
border-left-color: transparent;
border-right-color: #777777;
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #333333;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
border-right-color: #333333;
border-left-color: transparent;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: #d5d69e;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu.align-right > ul {
float: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #515223;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('images/bg.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
left: 0;
right: auto;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
text-align: left;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
border-bottom: 2px solid #515223;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}

As pointed out, the gap between your menu and the submenu is causing the menu button to lose it's hover state when the mouse moves towards the submenu.
The easiest solution would be to adjust the top property of the submenu to remove the gap. Try adding this to the very bottom of your styles.css file:
#cssmenu > ul > li.has-sub:hover > ul {
top: 37px;
}
Edit:
A better solution would be to use hover intent to delay the closing of the submenu so that the user has enough time to move the pointer to it's intended location

Drop Down Menu Goes Away To Quick

When I go to a sub menu on my Parent Link when I try and go to the grand child link the menu goes away to quick and does not allow me some times to click on the grand child link.
How can I make it so that can stay open until I click on a sub menu link or grand child link.
Codepen Example Here: http://codepen.io/riwakawebsitedesigns/pen/PwaemX
a.menu-link {
float: right;
display: block;
padding: 1em;
}
.menu, .menu > ul ul {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js .menu, .js .menu > ul ul {
overflow: hidden;
max-height: 0;
background: rgba(0,0,0,0.1);
}
.menu.active, .js .menu > ul ul.active {
max-height: 55em;
}
.menu > ul {
border-top: 1px solid #808080;
}
.menu li a {
color: #000;
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
position: relative;
}
.menu li.has-subnav > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.25em 0.5em;
}
.menu li.has-subnav > a.active:after {
content: "-";
}
/* Start Mobile */
#media screen and (min-width: 48.25em) {
.pattern {
overflow: visible;
}
a.menu-link {
display: none;
}
.js .menu, .js .menu > ul ul {
max-height: none;
overflow: visible;
background: none;
}
.js .menu > ul ul {
background: #808080;
display: none;
}
.js .menu > ul li:hover > ul {
display: block;
}
.menu ul {
margin: 0 0 0 -0.25em;
border: 0;
}
.menu li a {
border: 0;
}
.menu li.has-subnav > a {
padding-right: 2em;
}
.menu li.has-subnav > a:after {
content: ">";
font-size: 1em;
padding: 0.8em 0.5em;
}
.menu .level-1 > li.has-subnav > a:after {
content: "▼";
}
.menu > ul li {
margin: 0 0.25em;
}
.menu > ul > li {
display: inline-block;
position: relative;
}
.menu > ul ul {
position: absolute;
top: 0;
left: 12em;
width: 12em;
}
.menu > ul ul li {
position: relative;
}
.menu > ul ul.level-2 {
top: 3em;
left: 0;
}
}
/* End Mobile */

This style causes the problem, because it creates a gap between the levels:
.menu > ul li {
margin: 0 0.25em;
}
Change it to this:
.menu > ul li {
padding: 0 0.25em;
}
Updated Codepen

you used left:12emto .menu > ul ul. For this, third ul is going so far. Use maximum 11.5em to .menu > ul ul below the example is ...
.menu > ul ul{
position: absolute;
top: 0;
left: 11.5em;
width: 12em;
}

CSS cropping div elements

I am using jQuery wizard plugin called jQuery-Steps. Problem is that for some reason div elements inside my forms are cropped. i.e. right side is missing. When I remove jQuery plugin input type boxes are correctly shown:
Here is picture of result:
jsFiddle link:
Click me
CSS that I am using for plugin:
/*
Common
*/
.wizard,
.tabcontrol
{
display: block;
width: 100%;
overflow: hidden;
}
.wizard a,
.tabcontrol a
{
outline: 0;
}
.wizard ul,
.tabcontrol ul
{
list-style: none !important;
padding: 0;
margin: 0;
}
.wizard ul > li,
.tabcontrol ul > li
{
display: block;
padding: 0;
}
/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
position: absolute;
left: -999em;
display: none;
}
.wizard > .content > .title,
.tabcontrol > .content > .title
{
position: absolute;
left: -999em;
}
/*
Wizard
*/
.wizard > .steps
{
position: relative;
display: block;
width: 100%;
}
.wizard.vertical > .steps
{
display: inline;
float: left;
width: 30%;
}
.wizard > .steps .number
{
font-size: 1.429em;
}
.wizard > .steps > ul > li
{
width: 25%;
}
.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
float: left;
}
.wizard.vertical > .steps > ul > li
{
float: none;
width: 100%;
}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
display: none;
width: auto;
margin: 0 0.5em 0.5em;
padding: 1em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
background: #eee;
color: #aaa;
cursor: default;
}
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
background: #2184be;
color: #fff;
cursor: default;
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
background: #9dc8e2;
color: #fff;
}
.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
background: #ff3111;
color: #fff;
}
.wizard > .content
{
/* background: #eee;*/
display: block;
/* margin: 0.5em;*/
/* min-height: 35em;*/
overflow: hidden;
position: relative;
width: auto;
/*
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;*/
}
.wizard.vertical > .content
{
display: inline;
float: left;
margin: 0 2.5% 0.5em 2.5%;
width: 65%;
}
.wizard > .content > .body
{
float: left;
/* position: absolute;*/
width: 100%;
height: 100%;
/* padding: 2.5%;*/
}
.wizard > .content > .body ul
{
list-style: disc !important;
}
.wizard > .content > .body ul > li
{
display: list-item;
}
.wizard > .content > .body > iframe
{
border: 0 none;
width: 100%;
height: 100%;
}
.wizard > .content > .body input
{
display: block;
/* border: 1px solid #ccc;*/
}
.wizard > .content > .body label
{
display: inline-block;
/* margin-bottom: 0.5em;*/
}
.wizard > .content > .body label.error
{
color: #8a1f11;
display: inline-block;
/*margin-left: 1.5em;*/
}
.wizard > .actions
{
position: relative;
display: block;
text-align: right;
width: 100%;
}
.wizard.vertical > .actions
{
display: inline;
float: right;
margin: 0 2.5%;
width: 95%;
}
.wizard > .actions > ul
{
display: inline-block;
text-align: right;
}
.wizard > .actions > ul > li
{
margin: 0 0.5em;
}
.wizard.vertical > .actions > ul > li
{
margin: 0 0 0 1em;
}
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
background: #4493d9;
font-family: "Lato";
font-size: 13pt;
color: #fff;
display: block;
padding: 0.5em 1em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active
{
background: #eee;
color: #aaa;
}
.wizard > .loading
{
}
.wizard > .loading .spinner
{
}
/*
Tabcontrol
*/
.tabcontrol > .steps
{
position: relative;
display: block;
width: 100%;
}
.tabcontrol > .steps > ul
{
position: relative;
margin: 6px 0 0 0;
top: 1px;
z-index: 1;
}
.tabcontrol > .steps > ul > li
{
float: left;
margin: 5px 2px 0 0;
padding: 1px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabcontrol > .steps > ul > li:hover
{
background: #edecec;
border: 1px solid #bbb;
padding: 0;
}
.tabcontrol > .steps > ul > li.current
{
background: #fff;
border: 1px solid #bbb;
border-bottom: 0 none;
padding: 0 0 1px 0;
margin-top: 0;
}
.tabcontrol > .steps > ul > li > a
{
color: #5f5f5f;
display: inline-block;
border: 0 none;
margin: 0;
padding: 10px 30px;
text-decoration: none;
}
.tabcontrol > .steps > ul > li > a:hover
{
text-decoration: none;
}
.tabcontrol > .steps > ul > li.current > a
{
padding: 15px 30px 10px 30px;
}
.tabcontrol > .content
{
/* position: relative;*/
display: inline-block;
/* width: 100%;
height: 35em;
overflow: hidden;
border-top: 1px solid #bbb;
padding-top: 20px;*/
}
.tabcontrol > .content > .body
{
float: left;
position: absolute;
width: 95%;
height: 95%;
padding: 2.5%;
}
.tabcontrol > .content > .body ul
{
list-style: disc !important;
}
.tabcontrol > .content > .body ul > li
{
display: list-item;
}

You have a problem with your CSS. The width: 90% value added to the padding value of that input causes it to be bigger than the container it is in. If you add the following to your css it should fix it:
#datepicker {
width: 87% !important;
padding-left: 8% !important;
padding-right: 4.5% !important;
}
#table {
width: 100% !important;
}
#aligned {
width: 100% !important;
}
Fixed jsfiddle:
http://jsfiddle.net/4A6Wj/3/

CSS Menu Help - child / parent issues

I have a menu in a joomla template, when you hover a link the link highlights. I would like to know how to get the parent to stay that way when hovering over the child (sub-menu).
My current Code: HTML
<div id="navigation">
<ul class="menu ">
<li class="item-101 current active">
Home</span><span class="menudesc"></span></li>
<li class="item-107 deeper parent">Jamie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-108">Photos</span> <span class="menudesc"></span></li>
<li class="item-109">Thoughts</span> <span class="menudesc"></span></li></ul></li>
<li class="item-110">Mike</span> <span class="menudesc"></span></li>
<li class="item-111">John</span> <span class="menudesc"></span></li>
<li class="item-112 deeper parent">Carrie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-113">Pictures</span> <span class="menudesc"></span></li>
<li class="item-114">Thoughts</span> <span class="menudesc"></span></li>
<li class="item-115">Make-up</span> <span class="menudesc"></span></li>
<li class="item-116">books</span> <span class="menudesc"></span></li></ul></li>
<li class="item-117">Contact</span> <span class="menudesc"></span></li></ul>
</div>
The CSS:
/* Navigation */
#navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important}
#navbar { height: 55px; }
#navbar.row { margin-bottom: 0 }
#navigation { padding:0 10px;}
#navigation ul.menu { float:right}
#navigation .menu { margin: 0; padding: 0; list-style: none;}
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
#navigation .menu > li { display: block; float: left; }
#navigation .menu > li ul {}
#navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
#navigation .menu ul ul { left: 100%; top: 0; }
#navigation .menu ul ul li { width: 100% }
#navigation .menu li { position: relative }
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
#navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;}
/* current item */
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;}
#navigation .menu > .active > a, #navigation li.active > a {color: #fff }
#navigation .menu > li { margin-right: 5px; padding:0; }
#navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
/*drop-down styles*/
#navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px;
box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)}
#navigation .menu li:hover ul { margin-top: 0; }
#navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
#navigation .menu ul li { border-bottom: 1px solid #ccc }
#navigation .menu ul li:first-child { }
#navigation .menu ul li:last-child { border: 0 }
#navigation .menu ul li > a:hover { color: #67ABC9; background:none;}
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
#navigation .selector { display: none }
#navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
#navigation ul.sub-menu a { font-size:12px;}
#navigation ul.sub-menu .active > a { color:#67ABC9}
#navigation i { text-align:right}
#menu-icon {display: none;}
#slide-wrap a:hover{ color:#fff}

Your stylesheet is messy, you have lots of different rules with the same selector, join them; and delete unused ones.
I have cleaned the first part, finish the cleaning yourself.
About your question, basically you need
#navigation > .menu > .active > a,
#navigation > .menu > li:hover > a{
color: #fff;
background:#67ABC9;
}
Note the use of li:hover > a instead of li> a:hover.
Demo

I think this is solution you are looking for.
http://jsfiddle.net/pzaF8/
#navigation .menu > LI:hover{background-color: #67ABC9; color: #FFF}
I add only this line o your css, I didn`t edit yours cause it looks messy.