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.

Prevent sub-menu from moving down

I created a navbar using CSS and HTML. To that, I have added a sub-menu that opens when hovered over elements of "nav-list". I want the position of the sub-menu to be fixed since I want it to be one place irrespective of which element is hovered. The problem is I used sticky to fix the position of the navbar too. And when I scroll down while the submenu is open, it moves down too. How do I stop this?
<ul class="nav-list" >
<li>
Category
<ul class="sub-menu" id="sub-menu">
<li>shirts </li>
<li>Shorts</li>
</ul>
</li>
<li>
Ultra
<ul class="sub-menu">
<li>shirts </li>
<li>Shorts</li>
<li>Accessories</li>
<li>Shoes</li>
</ul>
</li>
</ul>
</nav>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
/*Code for Sticky*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .notice{
padding-top: 60px;
}
nav{
display: inline-flex;
width: 100%;
}
.nav-list{
display: flex;
width: 100%;
margin-top: .7rem; /*Use this to change the postition of dropdown*/
padding-left: 1.1rem; /*Use this to move the dropdown left and right*/
}
.nav-list li{
position: relative;
}
.nav-list > li > a{
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition:0.1s color 300ms;
}
.sub-menu {
display: flex;
position:fixed;
box-sizing: border-box;
background-color: black;
visibility:hidden;
top: 1.5rem; /*push up */
left: -2rem;
width: 82.5rem;
height: 35rem;
}
.sub-menu a{
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.sub-menu a:hover{
color: #7e7978;
}
.nav-list li:hover > .sub-menu {
visibility: visible;
opacity: 1;
}

Is there a way to make my navbar active and also keep hover effect?

Hi im wondering how i can make my navbar also active so when im on my secton page for about for example. I want the red line to be under About and so on. How do i accomplish that?
I have been struggeling to make it active but cant do it and its the last thing and then im 100% satisfied with my page... well atleast for now... please help me would love all the help i can get.
window.addEventListener('scroll', function(){
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
<!---Sticky navbar---->
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: white;
text-decoration: none;
}
header.sticky ul li a{
color: black;
}
header ul li a::after{
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after{
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a class="active" href="#home" onclick="toggleMenu();">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!--Front page image and text-------------------------------------------------------------------------------------------------------------------------------------------------->
<section class="landing-page" id="home">

You could create the function toggleMenu(element) which adds a class active to the given element and remembers it until the next call. When the function is called the next time it first checks if there is an active menu entry and deactivates it.
Consider the following code:
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
let elActiveAnchor = null;
function toggleMenu(elAnchor) {
elActiveAnchor?.classList.remove('active');
(elActiveAnchor = elAnchor).classList.add('active');
}
toggleMenu(document.getElementById("menu-home"));
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: gray;
text-decoration: none;
}
header.sticky ul li a {
color: black;
}
header ul li a::after {
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after,
/* This is the new selector for the "active" menu entry */
header ul li a.active::after {
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a id="menu-home" href="#home" onclick="toggleMenu(this)">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!-- Front page image and text -->
<section class="landing-page" id="home">

Submenu not overlapping the side parent elements

I have created custome side bar for my site, All is fine but I have menu's and submenu's when user hovers on the menu list if it has the submenu then it will show
thats fine. The problem is submenu not overlapping the scrollbar and side parent/sibling element. I have added images here for more clarification.
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
.menu ul {
list-style-type: none;
margin-left:-40px;
margin: 0;
padding: 0;
}
.menu ul > div{
font-weight:bold;
font-size:18px;
margin-top: 10px;
margin-bottom:0px;
border-bottom:1px solid #f1f1f1;
cursor: pointer;
}
.menu ul li {
padding: 5px;
position: relative;
vertical-align: middle;
height:auto;
width: 100%;
border-bottom:1px solid #f1f1f1;
font-size: 16px;
padding-left:10px;
}
.menu ul ul{
min-height: 30px;
transition: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 80%;
top:100%;
border: 1px solid #f1f1f1;
z-index: -1000000;
}
.menu ul ul > li{
width: 250px;
height: auto;
background-color: white;
border-bottom: 1px solid black;
}
.menu > ul > li > div > i{
float: right;
vertical-align: middle;
line-height: 1.5;
}
.menu ul li:hover{
background-color:#cccccc;
cursor:pointer;
opacity: 1;
}
.menu ul li:hover > ul{
opacity: 2;
visibility: visible;
z-index: 100000000;
//left: 100%;
}
<!-----Header will come here ----->
<div class="container-fluid row">
<div class="col-md-12 text-center" id="topHeader">
<span>Circulation</span>
</div>
<div class="col-md-2">
<div class="menu"><i id="hideSideBar" class="fa fa-close"></i>
<ul class="menuList"><div class="listName">Reports</div>
<li class="path" data-screen="CustomizedCirculationReportsCt/index" id="li_CustomizedReport">Customized Report</li>
<li class="path" data-screen="CustomizedCirculationStatisticsCt/index" id="li_CustomizedReport">Customized Statistics</li>
<li class="hasChildUl" id=""><div class="listName">UserWise Report<i class="fa fa-caret-right"></i></div>
<ul class="menuList">
<li class="path" data-screen="UserWiseCirculationController/AllUserCirculation" id="userWiseCrReport">Circulation Report</li>
<li class="path" data-screen="UserWiseCirculationController/userWiseFineCollection" id="userWiseFineCrReport">Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-10 firstChild">
<div class="row">
<p>Web pages goes here</p>
</div>
</div>
<!-----Footer will come here ----->
Image :

Updated Answer
I found a nice article on Popping out of hidden overflows that seems to address the issue.
The problem is due to non-obvious behaviour of the combined overflow properties and nested view hierarchies from position: absolute/relative/fixed.
You need a non-overflowing parent element that acts as the positioning anchor for the sub-menus. I tried to strip down your example to the neccessary parts:
.menu {
position: fixed;
}
ul {
list-style-type: none;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px dashed #ccc;
}
.menu ul li {
/*
this seems to be the problematic property
position: relative;
*/
}
.menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
left: 80%;
background: red;
}
.menu ul li:hover {
background-color: #cccccc;
}
.menu ul li:hover > ul {
opacity: 1;
z-index: 10;
}
<div class="menu">
<ul>
<li>Customized Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul></li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>UserWise Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
But there is a problem with the positioning of the submenu which can be addressed with javascript. Check the article for a better explanation.
Personally I always try to avoid nested scrolling whereever I can. I suggest that you evaluate the possibility of scrolling the whole page when the menu grows. Also, I'd not rely on submenus that are shown by :hover or mouseover because they are not available on touch-controlled browsers.
Original Answer
In the CSS, the menu has set its horizontal overflow to hidden. The Popup-Menu will show up when you remove the overflow properties:
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
/*
Remove this props
overflow-x: hidden;
overflow-y: auto;
*/
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
It works when you remove those lines from your example code.

Show active parent with matching submenu when page is loaded jQuery

I am working on a website where I am trying to achieve the following:
When the user clicks on a link, that link shall get an active status and the matching submenu shall become active also. When the user hovers over another link the active sub menu shall not be displayed. I have achieved that the current link is in an active status that matches the url but I can't get the matching submenu to show up. I don't know much about jQuery so I might I have stumbled upon the answer without knowing it. Here is some of the code as the website is currently on localhost.
HTML:
<div class="menu-container-portal">
<a class="toggle-menu" href="#" style="display: none;">
<img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
<ul class="nav">
<li class="">
Upplev & Besök
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li class="">
Bostäder
</li>
<li>
Evenemang
</li>
<li>
Kopia (1) av Upplev & Besök
</li>
<li>
Kopia (4) av Bostäder
</li>
<li>
Mat och dryck
</li>
<li>
Shopping
</li>
</div>
</ul>
</li>
<li>
Bo & Leva
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Flytta hit & Jobba
</li>
<li>
Näringsliv
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Kontakta oss
</li>
</ul>
</div>
CSS:
.menu-container-portal ul {
margin: 0;
padding: 0;
}
.active {
background: #2b90f5;
overflow: hidden;
}
.menu-container-portal li:hover>a {
color: #fff;
background: #304040;
opacity: .7;
}
.menu-container-portal li {
margin: 0;
padding: 0;
/*width: 100%;*/
height: 15%;
/*display: inline-block;*/
;
}
.menu-container-portal a {
text-decoration: none;
}
.menu-container-portal a:hover {
color: #dadcdf;
background: #304040;
padding-bottom: 10px;
}
/*.menu-container-portal {
max-width: 900px;
margin: 10px auto;
}*/
/*.menu-container-portal {
max-width: 900px;
margin-right: auto;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 15px;
white-space: nowrap;
text-align:left;
} */
.menu-container-portal {
max-width: 1100px;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
/* margin-left: 15px; */
white-space: nowrap;
text-align: left;
margin-left: 22.5%;
}
.toggle-menu {
display: none;
/*background: #404040;*/
padding: 10px 15px;
color: #fff;
}
.toggle-menu:hover {
opacity: 0.7;
}
.nav {
list-style: none;
*zoom: 1;
/*background:#404040;*/
display: flex;
justify-content: left;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 100%;
text-align: center;
}
.nav a {
padding: 10px 15px;
color: #101210;
*zoom: 1;
}
.nav>li {
float: left;
z-index: 200;
}
.nav>li>a {
display: inline-block;
}
.nav li ul {
display: flex;
position: absolute;
left: -99999px;
z-index: 100;
width: 100%;
/*height: 100%;*/
padding-bottom: 0.5em;
justify-content: left;
}
.nav li li a {
display: block;
/* display:inline-block; */
/*background: #404040;*/
/*position: relative;*/
z-index: 99999;
/*height: 100%;*/
width: auto;
/* width:100%; */
color: #fff;
}
.nav li li li a {
background: #404040;
/* z-index:200; */
;
}
.nav li {
/*position: relative;*/
;
}
.nav>li.hover>ul,
.nav>li.hover>ul :active {
left: 0;
overflow: hidden;
}
.nav li li.hover ul {
left: 100%;
top: 0;
overflow: hidden;
}
.arrow {
display: none;
}
.sub {
background: #304040;
opacity: 0.9;
}
ul .sub {
padding-top: 10px;
}
.menu-container-portal a:hover .nav li li li a {
background: #ff0000;
}
/* Bestämma undermenyns storlek */
.sub2 {
column-width: auto;
text-align: left;
}
.test1 {
display: inline-flex;
margin-left: 22.5%;
}
.test1-show {
display: block;
margin-left: 22.5%;
color: green !important;
}
jQuery:
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
/*$(".test1").addClass("active");
$('.nav a').filter(function(){
return this.href==location.href;}).parent()
.addClass('active').siblings().removeClass('active');
/*$(".nav > li > a").addClass("active");*/
$(document).ready(function () {
$('a(.active) a').hide();
$('a(.active)').hover(
function () {
$('.test1').hide();
},
function () {
$('.test1').show();
});
});
}
});
}
Hopefully that is all the code that is needed for you all to understand what I want and need some help with or some tips:) I think I got some of the jQuery code right I feel I am halfway there just the some little help :) thanks in advance :)
I was thinking about using one of these that I have found here:
http://jsfiddle.net/4G7TJ/1/
http://jsfiddle.net/MGkQC/7/
2019 - 01 - 21:
An update to my own post: I have come closer to my goal after alot of frustrating moments. But there is still one problem left I need to hide the submenu when I am hovering over another link here is the code so far:
jQuery:
$(document).ready(function() {
$(".nav li [href]").each(function() {
if (this.href == window.location.href) {
$(this).css("background", "red");
$(this).addClass("hover");
$(this).parent().find('ul.sub').css("left","0");
}
}); });
I was thinking about using .toggle somehow but cant really seem to get it working.

Intended you expecting the following functionality:
$("ul.nav > li > a").hover(
function(e) {
$('ul.nav > li > a.on-hover').removeClass('on-hover');
$(this).addClass('on-hover');
},
function(e){
//If you expecting to hide on-hover-out as well, uncomment the below line
//$('ul.nav > li > a.on-hover').removeClass('on-hover');
});
See in action: http://jsfiddle.net/kn761qgL/ and confirm.