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.

How can I expand the dropdown list wider than the title

I am trying to make a simple dropdown menu using Javascript that slides up and down when the user hovers over the title.
It all works OK as long as the dropdown items are no wider than the title. But I cannot work out how to accommodate wider dropdown items, other than to hard code the width of all the items in the relevant list.
Is there a better way to do this (my code is below).
$(document).ready(function() {
$(document).click(function(event) {
var text = $(event.target).text();
});
$("nav li").hover(
function() {
$(this)
.find("ul>li")
.stop()
.slideDown(400);
},
function() {
$(this)
.find("ul>li")
.stop()
.slideUp(400);
}
);
});
ul {
left: 0;
margin: 0;
padding: 0; /* to prevent the menu indenting - ul has padding by default */
list-style: none;
}
ul li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
background-color: purple;
width: 100px;
}
ul li a {
color: #fff;
text-decoration: none;
}
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
}
ul li li:hover {
background-color: green;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div>
<nav>
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Extra Extra Wide Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
<li>FAQ
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</div>

In you css where ul li li add width
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
width: 200px;
}
$(document).ready(function() {
$(document).click(function(event) {
var text = $(event.target).text();
});
$('nav li').hover (
function() {
$(this).find('ul>li').stop().slideDown(400);
},
function() {
$(this).find('ul>li').stop().slideUp(400);
}
);
});
ul {
left: 0;
margin: 0;
padding: 0; /* to prevent the menu indenting - ul has padding by default */
list-style: none;
}
ul li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
background-color: purple;
width: 100px;
}
ul li a {
color: #fff;
text-decoration: none;
}
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
width: 200px
}
ul li li:hover {
background-color: green;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div>
<nav>
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Extra Extra Wide Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
<li>FAQ
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</div>

Vertical menu dropdown that stays open on sub menu pages

I've been having trouble trying to wrap my head around how to get my menu sub items to stay open when on the active page. I've seen similar issues with resolutions but I can't seem to get them to work when I implement them, so I do apologise for the question being asked before. I'm using Jquery to open the sub menu items, allowing more than one to be open at any time and also closed at any time, the only issue is when a sub menu item is clicked the menu collapses and i'd like it to stay open when that page is visited. I've attached a JSFiddle to this so you can visualise what my questions is. Thank you, all help is greatly appreciated!
$(document).ready(function(e) {
$('.has-sub').click(function() {
$(this).toggleClass('open');
});
});
body {
font-family: sans-serif;
}
.left-nav {
width: 250px;
/*change to 100% of contain*/
background-color: gray;
}
.left-nav ul {
padding: 0px;
}
.left-nav li {
list-style: none;
}
.left-nav a {
display: block;
padding: 10px 0px 10px 20px;
text-decoration: none;
color: #fff;
}
/*hiding sub menu items*/
.left-nav ul ul {
display: none;
}
/*giving jquery a target*/
.left-nav ul li.open ul {
display: block;
}
/*arrow*/
.left-nav .has-sub:before {
content: '\203A';
float: right;
color: #fff;
margin-top: 10px;
margin-right: 40px;
/*to make it move*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.left-nav li.open:before {
content: '\2039';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
<ul>
<li class="has-sub">1st
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="has-sub">2nd
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</nav>

So what you need to do is to stop the propagation of the event when the user clicks the sub menu item using stopPropagation
$(document).ready(function(e) {
$('.has-sub').click(function() {
$(this).toggleClass('open');
});
// Just add this
$('.has-sub li a').click(function (e) {
e.stopPropagation();
});
});
body {
font-family: sans-serif;
}
.left-nav {
width: 250px;
/*change to 100% of contain*/
background-color: gray;
}
.left-nav ul {
padding: 0px;
}
.left-nav li {
list-style: none;
}
.left-nav a {
display: block;
padding: 10px 0px 10px 20px;
text-decoration: none;
color: #fff;
}
/*hiding sub menu items*/
.left-nav ul ul {
display: none;
}
/*giving jquery a target*/
.left-nav ul li.open ul {
display: block;
}
/*arrow*/
.left-nav .has-sub:before {
content: '\203A';
float: right;
color: #fff;
margin-top: 10px;
margin-right: 40px;
/*to make it move*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.left-nav li.open:before {
content: '\2039';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
<ul>
<li class="has-sub">1st
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="has-sub">2nd
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</nav>

Use e.target and the methods is() and hasClass() to check the element you are clicking:
$(document).ready(function() {
$('.has-sub').click(function(e) {
var val = $(e.target).parent();
if (val.is("li") && val.hasClass("has-sub")) {
$(val).toggleClass('open');
}
})
})
body {
font-family: sans-serif;
}
.left-nav {
width: 250px;
/*change to 100% of contain*/
background-color: gray;
}
.left-nav ul {
padding: 0px;
}
.left-nav li {
list-style: none;
}
.left-nav a {
display: block;
padding: 10px 0px 10px 20px;
text-decoration: none;
color: #fff;
}
/*hiding sub menu items*/
.left-nav ul ul {
display: none;
}
/*giving jquery a target*/
.left-nav ul li.open ul {
display: block;
}
/*arrow*/
.left-nav .has-sub:before {
content: '\203A';
float: right;
color: #fff;
margin-top: 10px;
margin-right: 40px;
/*to make it move*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.left-nav li.open:before {
content: '\2039';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
<ul>
<li class="has-sub">
1st
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="has-sub">2nd
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</nav>

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.

Most efficient way to create a slide-down submenu in jQuery

I am trying to make a submenu which slides down from the main menu bar when hovering over a certain element. I am currently doing this using the following code:
$(document).ready( function() {
$('.navlist li a').hover( function() {
if( $(this).attr( 'data-param' ) == "parent" )
{
$('#subnavbar-' + $(this).attr( 'data-slug' )).slideDown( 200 );
}
}, function() {
if( $(this).attr( 'data-param' ) == "parent" )
{
var name = '#subnavbar-' + $(this).attr( 'data-slug' );
setTimeout( function() {
if( !$(name).is(':hover') )
{
$(name).slideUp( 200 );
}
}, 200 );
}
});
});
a {
color: white;
}
.navbar {
background-color: green;
margin-bottom: 0;
height: 30px;
}
ul.navlist {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
float: left;
}
ul.navlist li {
display: block;
width: 100px;
float: left;
}
.subnavbar {
background-color: blue;
margin-top: 0;
height: 20px;
display: none;
}
ul.subnavlist {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
float: left;
}
ul.subnavlist li {
display: block;
width: 80px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul class="navlist">
<li>Item 1</li>
<li>Hover Here</li>
<li>Item 3</li>
</ul>
</div>
<div class="subnavbar" id="subnavbar-test">
<ul class="subnavlist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
As you can see by running the snippet; it works, but there are lots of bugs that I'm not sure what the best way to iron out are. Firstly, if the user hovers back and forth over the main menu item I don't want the event to be spammed, I could solve this problem using a setTimeout() and clearTimeout() but I'd like a better way if at all possible. Secondly, I'm not sure how best to get the subnavbar not to retract if the user has hovered over it instead of the parent menu item, how I'm doing it at the moment works, but then if the user hovers off, the navbar doesn't retract.

The efficient solution would be using just CSS. Absolutely no JQUERY required! Try this Fiddle.
HTML:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3
<ul>
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</nav>
CSS Code:
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
display: inline-table;
list-style: outside none none;
padding: 0 10px;
position: relative;
}
nav ul::after {
clear: both;
content: "";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
color: #757575;
display: block;
padding: 15px 20px;
text-decoration: none;
}
nav ul ul {
background: none repeat scroll 0 0 #5f6975;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
border-bottom: 1px solid #575f6a;
border-top: 1px solid #6b727c;
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
padding: 5px 10px;
}
nav ul ul li a:hover {
background: none repeat scroll 0 0 #4b545f;
}
nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}

as you told me better css I've made a quick fiddle for you.
Of course you need to polish the style but the "working" is there.
css just:
.container {
height:30px;
background-color:green;
color:#fff;
}
.container > ul {position:relative;}
.container > ul li {
display:inline-block;
margin-right:30px;
}
.container > ul >li > ul {
position:absolute;
left:0;
background-color:blue;
top:0px;
z-index:-1;
}
.container > ul > li:hover > ul {
top:30px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
edited: I change the aproach and insteed of makign the transition with height I've use just top. check it out

to solve your first issue I would recommend using the jQuery plugin Hover Intent. Like the name suggests, this provides an easy way to determine if the user intends to hover over the element and avoids the possibility of spamming the animation by quickly hovering in and out of the element multiple times.
To solve your second issue, if possible, you can add a containing element around both navbar and subnavbar and use that to close the subnavbar when you leave the containing element, if the subnavbar happens to be visible.
HTML:
<div id="containing_element">
<div class="navbar">
<ul class="navlist">
<li>Item 1</li>
<li>Hover Here</li>
<li>Item 3</li>
</ul>
</div>
<div class="subnavbar" id="subnavbar-test">
<ul class="subnavlist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</div>
jQuery:
$(document).ready( function() {
function hoverEnter() {
$('#subnavbar-test').slideDown(200);
}
$('#hoverlink').hoverIntent( hoverEnter );
$('#containing_element').mouseleave(function () {
if($('#subnavbar-test').is(':visible')) {
$('#subnavbar-test').slideUp(200);
}
});
});
Remember to include the script for hover intent as well.