Develop Reference

How to switch between menus via jQuery?

I'm trying to switch between menus when clicking on the admin or user menu link. How do I make this an animation to make it slideOutLeft for the current menu and then slideInLeft for the next menu? Is there any possible way by using it and not using add class display none or block?
Here's my code:
A little bit messy for the jQuery functions also is there any chance to improve and make it more robust for each functions?
$(document).ready(function () {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function (e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function (e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
.show-nav {display:block !important;}
.hide-nav {display:none !important;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>

I hope this is what you're looking for. I've added comments to the CSS where all the animation is defined.
$(document).ready(function() {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function(e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function(e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
/*changing the margin-left*/
.show-nav {margin-left: 0;}
.hide-nav {margin-left: -220px;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>

JavaScript + CSS Single Collapsible Vertical Menu

Everybody, I have been learning and trying to make a collapsible vertical menu using JavaScript and CSS.
What should I do so that when I expand both menus and I click again on user 1, the user 2 will be hidden?
Here's the coding:
body {
background:#ffffff;
margin: 0 auto;
}
#nav{
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display:none;
}
ul li a {
display:block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height:2em;
height:2em;
padding:2px 2px
}
li li a {
background:#D7DBDD
}
li:hover li a, li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #000000;
background-color: #F4D03F ;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {}
li.on ul {
display:block
}
li.off ul {
display:none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong></li>
<li><strong>User 1 ></strong>
<ul>
<li>Name </li>
<li>Age</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name</li>
<li>Age</li>
</ul>
</li>
</div>
</div>
</ul>
</body>

off previously selected li by removing on class from other element
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onclick = function() {
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload = startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>

You can use jQuery to reduce your coding efforts.
Following is the only code you need.
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").click(function(){
currentClass = $(this).attr('class');
$("#nav li").removeClass('on').addClass('off');
newClass = (currentClass == 'on' ? 'off' : 'on');
$(this).removeClass('off').addClass(newClass);
});
});
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li class=''><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 3 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>

I made this nav menu for reference. It's responsive to screen size too.
var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');
btn.addEventListener("click", function(){
ul.classList.toggle("active");
});
#bar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
font-family: Verdana;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
}
#navBtn {
display: none;
}
#media screen and (max-width: 500px) {
nav ul li,
nav ul li a {
text-align: center;
display: block;
}
nav ul {
display: none;
}
nav ul.active {
display: block;
}
#navBtn {
display: block;
width: 60px;
height: 60px;
border: 1px solid #fff;
background-color: #333;
color: #fff;
}
}
<div id="bar">
<button id="navBtn">☰</button>
<nav>
<ul id="navUl">
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
</div>
As a side note, you can also technically do this with pure CSS (though, that's a bit tricky; you'd use a checkbox w/ labels for it).
Also, I saw your className = code, so I wanted to specifically point out the Element.classList bit in my code. It comes with .add(), .remove(), .toggle() and other useful methods.

slide panel menu back button not working

I'm trying to write slide panel navigation. My backward button is not working. Here I'm including my working file on js-fiddle. And also please note that The "ABOUT" page have child element.
Click to get fiddle
Please help me to come back on its previous stage, when click on the "Close" button.

try this...
$(".back").on('click', function(){
$(".main-navigation").removeClass("open-panel");
});

This is some what from your desired output
$(document).ready(function() {
$(".main-navigation ul").prepend("<li class='back'><a href='#' title='Close'>close</a></li>");
$(".menu-trigger").click(function() {
$(".main-navigation").addClass("open-panel");
});
$(".main-navigation li").click(function() {
$(".main-navigation li ul").addClass("open-panel");
});
$(".main-navigation li").has("ul").addClass("sub-child");
$(".back").on('click', function() {
$("#mainNav").removeClass().addClass('main-navigation');
$("#mainNav ul li ul").removeClass();
});
});
.top-header {
background-color: #3173d0;
color: #fff;
font-size: 1rem;
min-height: 40px;
padding-top: 8px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.top-header .menu-trigger {
background-color: #103669;
color: #fff;
height: 40px;
left: 0;
position: absolute;
;
text-align: center;
top: 0;
width: 40px;
}
/* Mobile Sliding Panel Section */
.main-navigation {
background-color: #103669;
color: #fff;
left: -100%;
min-height: 100%;
position: absolute;
text-transform: capitalize;
top: 0;
z-index: 2;
}
.main-navigation:after,
.main-navigation:before {
content: '';
display: table;
}
.main-navigation:after {
clear: both;
}
.main-navigation ul {
background-color: #103669;
display: block;
left: 0;
min-height: 100%;
position: absolute;
top: 0;
width: 220px;
}
.main-navigation ul ul {
left: -100%;
}
.open-panel {
left: 0 !important;
transition: all ease 0.4s;
-o-transition: all ease 0.4s;
-webkit-transition: all ease 0.4s;
}
.back {
position: relative;
}
.close-panel {
left: -100%;
}
.main-navigation ul {
display: block;
}
.main-navigation ul li {
border-bottom: #2258a4 solid 1px;
display: block;
}
.main-navigation a {
color: #fff;
display: block;
font-size: 0.8125rem;
padding: 10px 15px;
text-align: left;
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
html {
font-size: 16px;
}
body {
background-color: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 0.875rem;
}
a {
color: #4b4b4b;
text-transform: capitalize;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
ul:after,
ul:before,
li:after,
li:before {
content: '';
display: table;
}
ul:after,
li:after {
clear: both;
}
ul,
li,
h1,
h2 {
margin: 0;
padding: 0;
}
button,
input[type=submit],
input[type=reset] {
border: none;
cursor: pointer;
}
<section class="top-header">
sliding panel demo
<button class="menu-trigger"><i class="fa fa-bars"></i></button>
<nav class="main-navigation" id="mainNav">
<ul>
<li>home</li>
<li>about us
<ul>
<li>company</li>
<li>vision</li>
<li>mission</li>
</ul>
</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The problem is you add $(".main-navigation li").click() class in this and $(".back") here you removed it so it performs both and got wrong output on second time when you close child menu also n reopen it.Do work on it..I suggested 50% solution :)

CSS3 Flip Dropdown Menu - Retain main-menu hover style when hovering over sub-menu

Here's the fiddle for my query
https://jsfiddle.net/e7te8hf1/
<section id="action-bar">
<div id="logo">
<img src="img/logo.png">
</div><!-- end logo -->
<nav class="navbar navigation main-navigation">
<ul class='menu main-menu'>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Women'>Women</span>
</a>
<ul>
<li>
Casuals
<ul>
<li>Tops</li>
<li>Bottoms</li>
<li>Suits</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Formals</li>
<li>
Prints
<ul>
<li>Stitched</li>
</ul>
</li>
<li>Anokhee</li>
<li>Abbayas</li>
<li>
Accessories
<ul>
<li>Bags</li>
<li>Pouch</li>
<li>Dupatta</li>
<li>Stole</li>
<li>Clutches</li>
</ul>
</li>
</ul>
</li>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Men'>Men</span>
</a>
<ul>
<li>
Casual
<ul>
<li>Tops</li>
<li>Bottoms</li>
<li>Suits</li>
</ul>
</li>
<li>Formal</li>
</ul>
</li>
<li class='menu-item'><span title='Look Book'>Look Book</span></li>
<li class='menu-item'><span title='Stores'>Stores</span></li>
<li class='menu-item'><span title='Contact'>Contact</span></li>
</ul>
</nav>
</section>
and the CSS is
#action-bar .navbar {
float: left;
}
#action-bar nav ul ul {
display: none;
}
#action-bar nav ul li:hover > ul {
display: block;
}
#action-bar nav ul {
background: #fff;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0;
text-align: center;
font-size: 15px;
font-family:'Oswald', sans-serif;
font-weight: bold;
}
#action-bar nav ul:after {
content:"";
clear: both;
display: block;
}
#action-bar nav ul li {
float: left;
}
#action-bar nav ul li:hover {
background: #6f100d;
}
#action-bar nav ul li a {
display: block;
color: #757575;
text-decoration: none;
border-right: 1px solid #E5E5E6;
border-bottom: 1px solid #E5E5E6;
transition: .8s background-color;
}
#action-bar nav ul li a:hover {
color: #fff;
}
#action-bar nav ul ul {
background: #fff;
padding: 0;
position: absolute;
top: 100%;
}
#action-bar nav ul ul li a {
color: black;
}
#action-bar nav ul ul li {
float: none;
position: relative;
}
#action-bar nav ul ul li a {
padding: 15px 40px;
color: black;
}
#action-bar nav ul ul li a:hover {
background: #6ABED6;
color: #fff;
}
#action-bar nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
#action-bar nav ul li:hover > a {
color: #fff;
}
#action-bar #view-cart {
float: right;
display: inline-block;
padding-top: 18px;
padding-left: 5px;
}
#action-bar #user-menu {
display: inline-block;
padding-left: 160px;
}
.menu .menu-item {
display: inline-block;
margin: 0;
padding: 0;
}
.main-menu .menu-item a {
color: #fff;
display: block;
text-decoration: none;
font-family:'Oswald:500', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
background: #fff;
}
.three-d span, .three-d span::before, .three-d span::after {
display: block;
transition: all .3s ease-out;
transform-style: preserve-3d;
}
.three-d {
position: relative;
cursor: pointer;
transition: all .07s linear;
}
.three-d span {
display: block;
padding: 18px 35px;
perspective: -200px;
}
.three-d span::before, .three-d span::after {
padding: 18px 35px;
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
box-sizing: border-box;
}
.three-d span::before {
transform: rotateX(0deg) translateZ(25px);
}
.three-d span::after {
transform: rotateX(-90deg) translateZ(25px);
background: #6f100d;
color: #f9f9f9;
}
.three-d:hover span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
I want the main-menu to retain the hover style when I hover over the sub-menu, using CSS, but I am unable to achieve that.
Can anyone please help?

Change the last block of CSS...
.three-d:hover span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
to this...
li:hover .three-d span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
and change the rest of your a:hover { selectors to li:hover > a {
JSFIDDLE

Submenu CSS dropdown menu disappears in CSS dropdown menu when mouse moves off of <li>

Well I am not really good in JS, but I think the only one can help solving my problam. I got sub menu with sub menu also. very simple:
<div class="dr_nav">
<ul>
<li><a href='#'>HOME</a>
<ul>
<li><a href='#'>List Example #1</a></li>
<li><a href='#'>List Example #2</a>
<ul>
<li> <a href='#'>List Example Child #1</a> </li>
</ul>
</li>
<li><a href='#'>List Example #3(hover)</a></li>
</ul>
</li>
</ul>
</div>
BUT! The thing I want, when I hovers over my "List Example #2" and "List Example Child #1" appears (in CSS i put display:none to it) it will stay visible even if I move out my coursor from its parent "List Example #2". I hope someone can help me with this.
My CSS is a bit hard and unorganized:
.dr_menu
{
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 999;
}
.dr_menu>ul
{
margin: 0;
padding: 0;
text-align: center;
}
.dr_menu>ul>li
{
display: inline-block;
padding: 0 0 10px 0;
margin-right: 40px;
}
.dr_menu>ul>li:last-child
{
margin:0;
}
.dr_menu ul li>ul
{
display: none;
position: absolute;
left: 0;
background-color: white;
margin: 0;
padding-top: 10px;
top: 100%;
-webkit-padding-start: 0px;
width: 1400px;
}
.dr_menu ul li ul li, .dr_menu ul li ul li a
{
padding: 10px 0px 10px 30px;
text-align: left;
}
.dr_menu ul li ul li a
{
display: block;
width: 770px;
color: #A0A0A0;
margin-left: 300px;
}
.dr_menu ul li ul li ul
{
display: none;
padding: 0;
position: relative;
padding-top: 20px;
}
.dr_menu ul li ul li ul li a
{
margin-left: 330px;
width: 740px;
}
.dr_menu ul li ul li ul li
{
padding: 0;
}
.dr_menu a
{
text-decoration: none;
color: #A0A0A0;
}
.dr_menu>ul>li>ul>li
{
padding-left: 0;
}
.dr_menu ul>li:hover
{
background-image: url('./img/nav_copy.png');
background-position: bottom;
background-repeat: no-repeat;
}
.dr_menu ul>li>a:hover
{
color: white;
}
.dr_menu ul li a:hover
{
color: white;
}
.dr_menu>ul>li>ul>li:last-child
{
margin-bottom: 30px;
}
.dr_menu li:hover>ul
{
display: block;
color: white;
}
.dr_menu ul li ul li a:hover
{
background-color: #A0A0A0;
color: black;
}
Here is mu JS:
jQuery(document).ready(function(){
$('#child').mouseleave(function() {$('#child').show()}, false);
}

You can make a menu with just CSS:
Demo Fiddle
.dr_nav li:hover>ul{
display:block;
}
.dr_nav li>ul{
display:none;
}