I'm working on the following code snippet, and running into trouble getting the dropdown sub-menu to stay down when hovering over the parent li. This code is supposed to work on both mobile and desktop renders. The mobile render is working fine, the problem I'm having only occurs on the desktop render. Wondering if someone can point me in the right direction.
$(document).ready(function() {
$("#navToggle a").click(function(e){
e.preventDefault();
$("header > div#top-container").slideToggle("slow");
$("header > div#bottom-container > nav").slideToggle("slow");
$("#logo").toggleClass("menuUp menuDown");
});
$(window).resize(function() {
if($( window ).width() >= "600") {
$("header > div#top-container").show();
$("header > div#bottom-container > nav").show();
if($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
}
else {
$("header > div#top-container").hide();
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li > a").click(function(e) {
if ($(window).width() <= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
/////this is where the problem is occurring
$("header > div#bottom-container > nav > ul > li > a").hover(function(e) {
if ($(window).width() >= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
});* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
/* Stop font scaling above 1920px */
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header>.menuDown {
box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
}
header>.menuUp {
box-shadow: none;
}
header>div#navToggle {
background-color: rgba(0, 0, 0, .15);
position: absolute;
right: 0;
top: 0;
transition: all 300ms ease;
}
header>div#navToggle:hover {
background-color: rgba(0, 0, 0, .1);
}
header>div#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
}
header>div#navToggle:hover>a {
color: rgba(255, 255, 255, 1);
}
header>#top-container {
display: none;
}
header>div#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
}
header>div#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
flex-grow: 1;
transform: all 300ms ease;
}
header>div#bottom-container nav>ul {
list-style-type: none;
}
header>div#bottom-container nav>ul>li {
border-bottom: 1px dotted rgba(0, 0, 0, .1);
position: relative;
}
header>div#bottom-container nav>ul>li:last-of-type {
border-bottom: none;
}
header>div#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: all 250ms ease;
}
header>div#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
border-radius: 3rem;
color: rgba(0, 0, 0, .25);
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header>div#bottom-container nav>ul>li>a span.caret {
display: none;
}
header>div#bottom-container>nav>ul>li:hover>a {
color: rgba(42, 35, 0, .5);
}
header>div#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(51, 51, 51);
}
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
transition: all 300ms ease;
}
header>nav>ul>li>nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, .6);
color: rgba(255, 255, 255, 1);
}
/* Medium screens */
@media all and (min-width: 600px) {
header>#top-container {
background-color: red;
display: flex !Important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
text-align: left;
width: 100%;
}
header>#top-container>div#box {
flex: 1;
}
header>#top-container>.box1 {
background-color: green;
flex-basis: 400px;
}
header>div#navToggle {
display: none;
}
header>div#bottom-container {
background-color: rgb(250, 209, 14);
color: rgba(42, 35, 0, 1);
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
border-top: .3rem solid #F9E484;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65);
}
header>div#bottom-container>nav {
background-color: transparent;
display: block;
}
header>div#bottom-container>nav>ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
header>div#bottom-container nav>ul>li {
border-bottom: none;
position: static;
}
header>div#bottom-container nav>ul>li>a {
padding: 0 1.25rem;
}
header>div#bottom-container nav>ul>li>a span.toggle {
display: none;
}
header>div#bottom-container nav>ul>li>a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(42, 35, 0, 1);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
<div id='top-container'>
<div id="box" class='box1'>logo</div>
<div id="box" class='box2'>our story</div>
<div id="box" class='box3'>contact us</div>
<div id="box" class='box4'>gift us a review</div>
</div>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Humour</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Your .hover is only on your A tag. When you mouse off the A tag over the sub menu, you effectively close the menu. You have two options:
1) Put the hover code on the LI that contains both the A tag menu and the sub menu (the NAV).
2) Put a second hover on the child NAV menu, so that it keeps itself open. I don't recommend this, as you may hit some odd timing issue.
I would also consider avoiding the use of .hover on mobile devices with a conditional check that doesn't even attach the event if the doc size is less than 640, as it may cause unexpected behavior on some mobile browsers such as mobile Safari (which sometimes tries to fake a hover event trigger when the user taps such an object). Mobile Chrome doesn't do this. Just a piece of advice though. Also as @Djave mentioned, you will get better results with a class triggering the hover than the tag search.
I've updated your code below with the hover on the LI and not the A tag.
$(document).ready(function() {
$("#navToggle a").click(function(e){
e.preventDefault();
$("header > div#top-container").slideToggle("slow");
$("header > div#bottom-container > nav").slideToggle("slow");
$("#logo").toggleClass("menuUp menuDown");
});
$(window).resize(function() {
if($( window ).width() >= "600") {
$("header > div#top-container").show();
$("header > div#bottom-container > nav").show();
if($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
}
else {
$("header > div#top-container").hide();
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li > a").click(function(e) {
if ($(window).width() <= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
/////this is where the problem is occurring
$("header > div#bottom-container > nav > ul > li").hover(function(e) {
if ($(window).width() >= "600") {
if ($(this).children("nav").size() > 0) {
e.preventDefault();
$(this).children("nav").slideToggle("slow");
}
}
});
});* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
/* Stop font scaling above 1920px */
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header>.menuDown {
box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
}
header>.menuUp {
box-shadow: none;
}
header>div#navToggle {
background-color: rgba(0, 0, 0, .15);
position: absolute;
right: 0;
top: 0;
transition: all 300ms ease;
}
header>div#navToggle:hover {
background-color: rgba(0, 0, 0, .1);
}
header>div#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
}
header>div#navToggle:hover>a {
color: rgba(255, 255, 255, 1);
}
header>#top-container {
display: none;
}
header>div#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
}
header>div#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
flex-grow: 1;
transform: all 300ms ease;
}
header>div#bottom-container nav>ul {
list-style-type: none;
}
header>div#bottom-container nav>ul>li {
border-bottom: 1px dotted rgba(0, 0, 0, .1);
position: relative;
}
header>div#bottom-container nav>ul>li:last-of-type {
border-bottom: none;
}
header>div#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: all 250ms ease;
}
header>div#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
border-radius: 3rem;
color: rgba(0, 0, 0, .25);
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header>div#bottom-container nav>ul>li>a span.caret {
display: none;
}
header>div#bottom-container>nav>ul>li:hover>a {
color: rgba(42, 35, 0, .5);
}
header>div#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(51, 51, 51);
}
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
transition: all 300ms ease;
}
header>nav>ul>li>nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, .6);
color: rgba(255, 255, 255, 1);
}
/* Medium screens */
@media all and (min-width: 600px) {
header>#top-container {
background-color: red;
display: flex !Important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
text-align: left;
width: 100%;
}
header>#top-container>div#box {
flex: 1;
}
header>#top-container>.box1 {
background-color: green;
flex-basis: 400px;
}
header>div#navToggle {
display: none;
}
header>div#bottom-container {
background-color: rgb(250, 209, 14);
color: rgba(42, 35, 0, 1);
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
border-top: .3rem solid #F9E484;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65);
}
header>div#bottom-container>nav {
background-color: transparent;
display: block;
}
header>div#bottom-container>nav>ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
header>div#bottom-container nav>ul>li {
border-bottom: none;
position: static;
}
header>div#bottom-container nav>ul>li>a {
padding: 0 1.25rem;
}
header>div#bottom-container nav>ul>li>a span.toggle {
display: none;
}
header>div#bottom-container nav>ul>li>a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(42, 35, 0, 1);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
<div id='top-container'>
<div id="box" class='box1'>logo</div>
<div id="box" class='box2'>our story</div>
<div id="box" class='box3'>contact us</div>
<div id="box" class='box4'>gift us a review</div>
</div>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Humour</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>