We Keep Coding

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.

Navbar bar not updating to active when clicked

I have a simple navbar that I am trying to get the background to be green when clicked. However it does not seem to be working.
When I hover over the link the background turns green and works fine. However I cannot get it so that when I click on the link the background remains green and if I click another link the new active turns green and the previous active turn white.
$(".sidebar ul li").on("click", function() {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>

add jquery link to your code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>

I have added your code here - it seems to work right.
Maybe something overlaps your navbar? Can it happen?
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
</div>

One reason can be that when you click, what it gets clicked is the anchor element not the li.
You can add a class to your a tag and then target that class for the click function. And also modify the css to add the background when the a has the class.
So something like this for your anchor elements
<li>
<a class="nav-link" href="#Welcome">Welcome</a>
</li>
Your css would look like
.sidebar .nav-link.active {
color: #ffffff;
background-color: #1aa322;
}
And your js would be like
$(".nav-link").on('click', function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
Another reason could be that you ar executing your js before the elements are there. So try wrapping your code like.
$(document).ready(function() {
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
});
Both solutions work.
And you should also not have the same id in multiple elements. So you should get rid of id="menu" or change it to be unique for each element

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>

if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css

I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.

How to add a header sub-menu using jQuery on click?

In my page header I have a list of 6 categories and I'd like to add a sub menu for each category, but display it only when category is clicked. (I'd like to use only one handler in my script.js file, not add one for each category in particular. - less code)
Here is my HTML for the list in header:
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class=“sub-menu”></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class=“sub-menu”></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class=“sub-menu”></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class=“sub-menu”></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class=“sub-menu”></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class=“sub-menu”></div>
</li>
</ul>
This is the SCSS:
#menu {
position: absolute;
right: 25px;
top: 25px;
.menu_item {
position:relative;
font-family: $OpenSansSemibold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
div.sub-menu {
position:absolute;
top:40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
&:hover{
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
}
}
And here is what I tried so far, but it doesn't work:
$( ".menu_item" ).each(function() {
$(this).children().find(".sub-menu").toggle();
});
Any help would be much appreciated, thank you!

Just remove the .children() and it should work. .children() accesses direct children already, while .find() will traverse down the DOM tree from that element. So in your code, you were looking for any child (grandchild, etc) of direct children of .menu_item that was clicked. .sub-menu wasn't a child of direct children of .menu_item, but was rather already that element ;) I am using the .find() method here because it'll still work, even if your DOM changes. If you won't change anything in regards to your DOM structure of the menu, you are safe to use $(this).children().toggle();
var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
$subMenus.addClass("hidden");
$(this).find(".sub-menu").removeClass("hidden");
});
SCSS:
#menu {
.menu_item {
div.sub-menu {
....
&.hidden {
display: none;
}
}
}
}

Please try this:
jQuery( ".menu_item" ).click(function(e) {
jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});
#menu {
position: absolute;
right: 25px;
top: 25px;
}
#menu .menu_item {
position: relative;
font-family: 'OpenSansSemibold';
font-size: 14px;
color: #333; /*fff; changed just for display */
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
#menu .menu_item:hover {
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class="sub-menu"></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class="sub-menu"></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class="sub-menu"></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class="sub-menu"></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class="sub-menu"></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class="sub-menu"></div>
</li>
</ul>

My dropdown menu pushes down everything else

I want my submenu to slide down over everything else, instead of pushing it all down. I can make this happen with position:fixed;, but then the size of the submenus change. How do I solve this and keep the width of the submenus?
Fiddle
HTML:
<div id="nav">
<div id="meny">
<ul id="menu">
<li class="dropmenu">Abcde
<ul class="submenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="dropmenu">Fghijklm
<ul class="submenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="dropmenu">Shop
<ul class="submenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<p>Texting texting</p>
</div>
CSS:
#nav{
width: 956px;
margin: 0 auto;
}
#meny{
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
#menu{
display: table-row;
list-style: none;
font-family: Verdana, Arial, sans-serif;
font-size: 0.9em;
}
.dropmenu{
display: table-cell;
}
.dropmenu a {
display: block;
text-decoration: none;
text-align: center;
background-color: #ff5b2e;
color: #303030;
}
.submenu{
display: none;
list-style: none;
background: #ff5b2e;
padding: 0;
width: auto;
}
.submenu li {
width: 100%;
display: block;
}
.submenu li a {
width: 100%;
background: #ff5b2e;
color: #303030;
}
JavaScript:
$(document).ready(function() {
$('.dropmenu').hover(function() {
$(this).find('.submenu').stop().slideToggle();
});
});

To prevent content from being pushing bottom, you must use position: absolute;
But that cause problems with dropdown menu width, as you are using table/table-cell structure. There is no easy way to adjust the width of dropdown menu with css, so you can use JQuery to calculate it.
$(document).ready(function() {
$('.dropmenu').hover(function() {
$(this).find('.submenu').stop().slideToggle().css('width', $(this).width());
});
});
Fiddle

Quick fix to keep your layout. Add the following css to the nav class:
height: 20px;
position: relative;
z-index: 2;
JSFiddle

You should style your Sub menu by positioning it absolute