We Keep Coding

Dropdown - cant click on the items

I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li {
position: relative;
}
#navContainer ul li span {
display: block;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
}
#navContainer ul ul {
position: absolute;
display: none;
}
#navContainer ul li:hover ul {
width: 80%;
position: absolute;
display: block;
left: 88px;
top: 0;
}
<div id="navContainer">
<ul>
<li><span>Home</span></li>
<li>
<span>About </span>
<ul>
</ul>
</li>
<li>
<span>Quiz's</span>
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li><span>Info</span></li>
</ul>
</div>
This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears
I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.

Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
position: relative;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
background: lightgrey;
position: relative;
}
ul>li {
position: relative;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
position: relative;
}
#navContainer ul>li>ul {
position: absolute;
display: none;
left: 100%;
width: 100%;
background-color: pink;
top: 0px;
}
#navContainer>ul>li:hover>ul {
display: block;
}
<div id="navContainer">
<ul>
<li>Home</li>
<li>
About
<ul>
</ul>
</li>
<li>
Quiz's
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li>Info</li>
</ul>
</div>

You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.
Added a border to the li elements to demonstrate.
https://jsfiddle.net/rojqczsp/
You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.

Navigation Menu Not Working on Big Cartel

I have a custom drop-down navigation menu that I want to use on my big cartel theme. It has HTML, CSS and Java Script.
Unfortunately, It is not working. The Java Script helps with the toggle event.
The drop-downs are on "Shop" and "About". When I click those dropdowns, they don't show.
In my Big Cartel Theme, I first tried linking to the JS file -- that didn't work.
I then put the script in the area and it still didn't work.
Here's the code working
https://codepen.io/findingcolors/pen/ZErZZgo
HTML
<div class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><i class="fa-solid fa-bars"></i> Menu</a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Shop <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
All Products
</li>
<li>
Stickers
</li>
<li>
Notepads + Sticky Notes
</li>
<li>
Bookmarks
</li>
<li>
Jewelry
</li>
<li>
Phone Straps
</li>
</ul>
</li>
<li>
About <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
The Brand
</li>
<li>
Shipping + Returns
</li>
<li>
FAQ
</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Cart
</li>
<li>
Search
</li>
</ul>
</nav>
</div>
</div>
CSS
/* --- NAVIGATION bar --- */
.navigation {
height: 50px;
background: #fefcfc;
font-family: "Open Sans", sans-serif;
}
.nav-container {
text-align: center;
margin: 0 auto;
}
nav {
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #fefcfc;
color: #716558;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
color: #90867a;
}
nav ul li ul li {
min-width: 250px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
text-align: left;
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #fefcfc;
height: 50px;
width: 50px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
text-align: left;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: inline-block;
}
}
#nav-toggle {
position: absolute;
left: -160px;
top: 10px;
cursor: pointer;
padding: 10px 35px 16px 0px;
color: #716558;
text-decoration: none;
font-size: 16px;
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Java
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery

The jQuery library was missing from the website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
After including it, the navigation menu is working now.

Issues on the dropdown menu / Submenu, hover isn't working?

I have an issue with my dropdown menu: it isn't working. However, my menu IS.
The links don't work properly either, they take me to the page but not the section.
If I take out display: none on the dropdown menu CSS it does show my menu, but not as a dropdown. The menu is properly coded and there I guess, but it somehow doesn't display correctly.
<nav>
<ul class="menu">
<li class="...">
...
</li>
<li class="item">..</li>
<div class="....">
<ul>
<li>...</li>
<li>..</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<li class="item">...</li>
<li class="item">...</li>
<li class="item">..</li>
</ul>
</nav>

It's semantically not correct to add div inside ul. Add submenu inside the parent li to which submenu belongs.
nav {
width: 100%;
flex: 1;
}
nav ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding-top: 4%;
margin: 0;
}
nav ul li {
padding: 1em 4em;
}
nav ul li a {
text-decoration: none;
margin-right: auto;
color: #000;
font-size: 17px;
}
nav ul li a:hover {
border-bottom: 2px solid #724c20;
}
li.logo {
margin-right: auto;
}
.Submenu {
display: none;
}
nav ul li:hover .Submenu {
display: block;
background-color: #724c20;
position: absolute;
margin-top: 15px;
margin-left: -15px;
}
nav ul li:hover .Submenu ul {
display: block;
margin: 10px;
}
nav ul li:hover .Submenu ul li {
width: 150px;
padding: 10px;
border-bottom: 1px;
background: transparent;
border-radius: 0;
text-align: center;
}
nav ul li:hover .Submenu ul li:last-child {
border-bottom: none;
}
nav ul li:hover .Submenu ul li a:hover {
color: #d1b9a5;
}
<nav>
<ul class="menu">
<li class="logo">
<img src="..." class="logo" alt="...">
</li>
<li class="item">..
<div class="Submenu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
</li>
<li class="item">..</li>
<li class="item">..
<div class="Submenu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
</li>
<li class="item">..</li>
</ul>
</nav>

I use javascript to make drop down menues. Take the dropdown menu display: none;. To show drop down menu you have to do something, like click to an icon. So you have to import an icon or add a button and use javascript:
<script type="text/javascript">
$("*here comes your icon's/div's/button's id/class name you want*").click(function(){
$(".Submenu").toggleClass("active");
});
</script>
than you have to write in CSS what hapens when .Submenu will be active:
.Submenu.active {
display: block;
}
Here an exemple from my last project:
<script type="text/javascript">
$(".menu-toggle-btn").click(function(){
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
If you want to when you click on an icon and the menu drops down the icon will change to another you have to write this to your javascript script: $(this).toggleClass("fa-times"); . toggleClass("here comes your icons class name ");
If you have any other questions feel free to ask.

Javascript hover addclass not working after Ajax call

I created a menu and when you hover a child item, then some content will showing up.
The only problem is when after calling Ajax. It looks like the javascript is not working inside this Ajax call.
$.noConflict();
jQuery(document).ready(function($) {
$('.nav-menu li').hover(function() {
$(this).addClass('showcontentblock')
}, function() {
$(this).removeClass('showcontentblock')
});
});

You should put code you want to run after an Ajax call within the success, error or complete property of your Ajax method.
$.ajax({
type: 'post',
url: "www.url.com",
success: function (response) {
// Run code on success
},
error: function (error) {
// Run code on error
},
complete: function () {
// Run code no matter the outcome
$('.nav-menu li').hover(function() {
$(this).addClass('showcontentblock');
});
}
});

If the element(s) do not exist on page load or prior to the AJAX call you can bind event listeners using $(document).on and pass the selectors as the second argument. This replaces the legacy methods .live and .delegate
$.noConflict();
jQuery(document).ready(function($){
$('.nav-menu')
.on('mouseenter', 'li', function(){
$(this).addClass('showcontentblock');
})
.on('mouseleave', 'li', function(){
$(this).removeClass('showcontentblock');
});
});
I also agree that should be handled with CSS only.
.nav-menu li:hover {
// copy+paste showcontentblock styles
}
It seems like you're dynamically adding these menus. Try this pure CSS approach to the nav-menu.
.nav-menu {
background-color: #fff;
border-bottom: 1px solid #ddd;
display: sticky;
z-index: 1000;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li.sub-menu:hover > .nav-items {
display: block;
}
.nav-menu li a,
.nav-menu li span {
color: #131313;
display: block;
padding: 15px 10px;
text-decoration: none;
}
.nav-menu li.sub-menu > span {
padding-right: 30px;
}
.nav-menu li.sub-menu > span:after {
content: "\f054";
font-family: "FontAwesome";
font-style: normal;
font-weight: 400;
font-size: 10px;
margin-top: 5px;
position: absolute;
right: 10px;
}
/* main navigation items */
.nav-menu > li.sub-menu > span:after {
content: "\f078";
font-family: "FontAwesome";
margin-top: 4px;
}
.nav-menu li a:hover,
.nav-menu li span:hover {
background: #eee;
}
.nav-menu .nav-items {
display: none;
}
.nav-items {
background: #fff;
border-radius: 3px;
box-shadow: 0 0 0 1px #e9e9e9, 0 1px 2px rgba(0,0,0, .1);
display: block;
left: 0;
list-style-type: none;
margin: 1px 4px 0 0;
padding: 0;
position: absolute;
width: 200px;
z-index: 9;
}
.nav-items li {
display: block;
}
.nav-items li a,
.nav-items li span {
display: block;
color: #131313;
padding: 10px;
}
.nav-menu .nav-items > li.sub-menu:hover > .nav-items {
display: block;
}
.nav-menu .nav-items .nav-items {
position: absolute;
left: 200px;
top: -1px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<ul class="nav-menu">
<li>
<a href="">
Home
</a>
</li>
<li class="sub-menu">
<span>Solutions</span>
<ul class="nav-items">
<li>
Marketing
</li>
<li class="sub-menu">
<span>Products</span>
<ul class="nav-items">
<li class="sub-menu">
<span>Email Signatures</span>
<ul class="nav-items">
<li>
Compliance
</li>
<li class="sub-menu">
<span>Tracking</span>
<ul class="nav-items">
<li>
Analytics
</li>
<li>
GDPR
</li>
<li>
Reporting
</li>
</ul>
</li>
</ul>
</li>
<li>
Integrations
</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
</ul>

On click, toggle a previously clicked icon back to it's original state

I have two drop down menus on a navigation bar, and have gotten the icons to toggle as long as that anchor is clicked, but i can not figure out how to get one to reset if a separate sub menu is clicked. I'm asking if there's a way to make this happen with how it is laid out now, and if not, how do i achieve this?
I'm also sorry in advance if this whole thing is littered with rookie mistakes.
I tried to condense the JSfiddle as much as possible, but you may need to expand the side part to see the affected icons to the right. I left out the responsive portion.
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
})
$("nav ul li a").click(function() {
$(this).find("i").toggleClass("fa-angle-down fa-angle-up");
});
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", sans-serif;
background: url(img/sunset.jpg);
background-attachment: fixed;
background-position: center;
}
header {
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
background: #000000;
width: 100%;
box-sizing: border-box;
}
.header-icons {
color: white;
}
header nav ul li a.active span {
color: red;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: inline-flex;
}
header nav ul li {
list-style: none;
position: relative;
}
.sub-menu {
color: fff;
}
header nav ul li ul {
position: absolute;
left: 0;
display: none;
}
header nav ul li.active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: auto;
text-align: center;
}
header nav ul li ul li a {
background: linear-gradient(#000000, #34282C);
border-style: inset;
border-color: #000;
}
/*full screen header*/
header nav ul li a {
font-family: "Helvetica Neue", sans-serif;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: block;
}
header nav ul li a:hover {
transition: .25s;
font-weight: ;
color: #000000;
background: #2196f3;
}
header nav ul li a.active {
background: #25383C;
font-weight: normal;
color: #fff;
}
header nav ul li a.active:before {
content: '\f096';
font-family: fontAwesome;
font-size: 25%;
position: absolute;
line-height: 50px;
bottom: 20px;
right: 2px;
color: #fff;
cursor: pointer;
}
.menu-toggle {
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>
<body>
<header>
<nav>
<ul>
<li><span class="header-icons"><i class="fas fa-pen-square fa-fw"></i></span>Services<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><span class="header-icons"><i class="far fa-image fa-fw"></i></span>Portfolio<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
<ul>
<li>Link </li>
<li>Link </li>
<li>Link </li>
<li>Link </li>
</ul>
</ul>
</nav>
</div>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i>
</div>
</header>
</body>

This is another solution just for your reference. I check for the active class under li tag, then remove or add the fa-angle-down or fa-angle-up class on i tag.
$('.menu-toggle').click(function(){
$('nav').toggleClass('active')
})
$('ul li').click(function(){
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
// Check for active class
if($(this).hasClass('active')){
$(this).parent().find("i").removeClass("fa-angle-up").addClass("fa-angle-down");
}
$(this).find("i").toggleClass("fa-angle-down fa-angle-up");
})
https://jsfiddle.net/80wne34L/79/

Normally this is achieved by:
Make all arrows down.
Make clicked arrow up.
This function will work for you:
$("nav ul li a").click(function() {
// Cache variables (for speed)
var $this = $(this),
$arrow = $this.find('.sub-menu i');
// Make all arrows point down, excepted clicked arrow
$('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');
// Toggle this arrow
$arrow.toggleClass("fa-angle-down fa-angle-up");
});
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
});
// Move into $(document).ready() for good practices
$("nav ul li a").click(function() {
// Cache variables (for speed)
var $this = $(this),
$arrow = $this.find('.sub-menu i');
// Make all arrows point down, excepted clicked arrow
$('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');
// Toggle this arrow
$arrow.toggleClass("fa-angle-down fa-angle-up");
});
})
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", sans-serif;
background: url(img/sunset.jpg);
background-attachment: fixed;
background-position: center;
}
header {
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
background: #000000;
width: 100%;
box-sizing: border-box;
}
.header-icons {
color: white;
}
header nav ul li a.active span {
color: red;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: inline-flex;
}
header nav ul li {
list-style: none;
position: relative;
}
.sub-menu {
color: fff;
}
header nav ul li ul {
position: absolute;
left: 0;
display: none;
}
header nav ul li.active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: auto;
text-align: center;
}
header nav ul li ul li a {
background: linear-gradient(#000000, #34282C);
border-style: inset;
border-color: #000;
}
/*full screen header*/
header nav ul li a {
font-family: "Helvetica Neue", sans-serif;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: block;
}
header nav ul li a:hover {
transition: .25s;
font-weight: ;
color: #000000;
background: #2196f3;
}
header nav ul li a.active {
background: #25383C;
font-weight: normal;
color: #fff;
}
header nav ul li a.active:before {
content: '\f096';
font-family: fontAwesome;
font-size: 25%;
position: absolute;
line-height: 50px;
bottom: 20px;
right: 2px;
color: #fff;
cursor: pointer;
}
.menu-toggle {
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>
<body>
<header>
<nav>
<ul>
<li><span class="header-icons"><i class="fas fa-pen-square fa-fw"></i></span>Services<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>
<a href="#">
<span class="header-icons"><i class="far fa-image fa-fw"></i></span> Portfolio
<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
</a>
<ul>
<li>Link </li>
<li>Link </li>
<li>Link </li>
<li>Link </li>
</ul>
</ul>
</nav>
</div>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i>
</div>
</header>
</body>