Develop Reference

I wanna show an element when hovering it using Jquery but even though it recognizes the event it won´t work

So, i've seen some other answers for similar stuff, but nothing that really helps or even works, I've tried to follow every step people said in other posts but nothing helped.
I wanna show a sub menu when I hover over it by removing the class hidden that it is defining its display to hiden, but I can´t make it using only css and, even though my js code recognizes that the mouse is hovering through it, it won´t budge.
So, here's my codes
$(".dropdown").hover(function() {
console.log('hover in');
$(".dropdown-content").removeClass("hidden");
console.log('hover out');
$(".dropdown-content").addClass("hidden");
})
.hidden {
display: none;
}
.menu-desktop {
position: absolute;
left: 70%;
list-style-type: none;
}
.menu-desktop ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu-desktop a {
display: inline;
float: left;
margin-left: 5px;
color: #bcbcbc;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background-color: transparent;
border-radius: 0%;
border-color: transparent;
}
.menu-desktop a:hover {
color: #858181
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown-content .shown {
position: absolute;
background-color: blue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-itens">
<div class="logo">
<img src="assets/9mnb2mazqne71.png" alt="">
</div>
<!-- Navigation menu -->
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA</li>
<ul id="submenu" class="dropdown-content hidden">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1</li>
<ul id="submenu2" class="dropdown-content hidden">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</ul>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
</nav>
EDIT: Forgot to include my css, so, here it is!

You need to declare function inside hover() to handle hover in & out event:
$( ".dropdown" ).hover(
function() {
$(".dropdown-content").removeClass("hidden");
}, function() {
$(".dropdown-content").addClass("hidden");
}
);

The problems with your code
Main problem
You immediately add the class back after removing it, so you never see the dropdown content.
jQuery's .hover() expects two function arguments (first is run when mouse enters, second when mouse leaves).
direct-child-only problem
Second problem with your code is that it toggles the class on all submenus while the one you want is only the direct, immediate child of the list item being hovered. You can use
$(this).find(".dropdown-content").first()
to only affect the sub-ul you want. Alternatively, instead of .first(), you can also use .eq(0).
Invalid html problem
Please also note that ul can only have li children, so you need to wrap any sub-ul inside an li.
The solution to not use
$(".dropdown").hover(
function() {
$(this).find(".dropdown-content").first().removeClass("hidden");
},
function() {
$(this).find(".dropdown-content").eq(0).addClass("hidden");
}
);
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA
<ul id="submenu" class="dropdown-content hidden">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1
<ul id="submenu2" class="dropdown-content hidden">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
The solution to use is CSS only
That being said, you don't need any JavaScript for this, and you shouldn't be using JS for a CSS job:
.dropdown-content {
display: none;
}
.dropdown:hover > .dropdown-content {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA
<ul id="submenu" class="dropdown-content">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1
<ul id="submenu2" class="dropdown-content">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>

Showing and hiding multi-column-dropdowns

I'm working on a mock site for my web developer portfolio. I don't have much experience with Javascript and JQuery, but I'm trying to figure out the most efficient way to show and hide dropdowns for a nav menu. My JQuery isn't working and I wanted to know if anyone had any tips. Also, I do plan on making dropdowns for all the instruments in the first Ul.
HTML:
<body>
<div class="container-fluid">
<div id="main-page">
<ul id="main-menu">
<li class="main-menu-list-items" style="border: 1px solid black;">
<div class="dropdown">
<ul>
<li>Products</li>
<div id="myDropdown" class="dropdown-content">
<ul>
<li class="dropdown-submenu"><a onclick="myClarinetDrop()" class="clarinet-drop" href="#">Clarinet</a>
<div id="my-clarinet-dropdown" class="dropdown-content">
<ul>
<li>Bb Clarinet</li>
<li>Bb Bass Clarinet</li>
<li>Eb Clarinet</li>
<li>Alto Clarinet</li>
<li>Bb German Clarinet</li>
<li>Bb Contrabass Clarinet</li>
</ul>
</li>
<li>Saxophone</li>
<li>Flute</li>
<li>Bassoon</li>
<li>Recorder</li>
<li>Brass</li>
<li>Guitar</li>
<li>Piano</li>
<li>Orchestral</li>
<li>Percussion</li>
</div><!--closes "myDropdown"-->
</ul>
</div><!--closes dropdown-->
</li>
<li class="main-menu-list-items"style="border: 1px solid black;">
<span>Shop By Brands</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>How To Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>Quick Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>About Us</span>
</li>
</ul><!--closes "main-menu"-->
</div><!--closes "main-page"-->
</div><!--closes "container-fluid"-->
</body>
CSS:
body {
margin:0;
padding:0;
}
.main-menu-list-items {
list-style-type:none;/*removes bullet point*/
float:left;/*puts list items side by side -- with no spaces*/
padding:15px 75px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown >ul {
margin-left:-40px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
position: absolute;
min-width: 1154px;
border:1px solid black;
margin-left:-76px;
margin-top:15px;
height:50px;
list-style-type:none;
}
.dropdown-content > ul {
list-style-type:none;
}
.dropdown-content >ul >li {
position:relative;
float:left;
padding:15px 29px;
}
.dropdown-submenu > div > ul > li {
position:relative;
float:left;
padding:15px 52px 0 30px;
}
.dropdown-submenu > div > ul {
border:1px solid black;
height:50px;
margin-left:-70px;
bottom:-54px;
min-width: 1114px;
position:absolute;
list-style-type:none;
display:none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
JQuery:
$(' .main-menu-list-items > .dropdown').click(function() {
var submenu = $(this).children('.dropdown > ul');
if($('.dropdown-content').css('display') == 'none') {
$(submenu).show();
}
else {
$(submenu).hide();
}
});

If you want to open a single sub-menu, it should be sufficient to add a class. You can then show the child element (.dropdown-content) by adding another CSS rule. If you remove that class, the child node will be hidden again. I have rewritten your code a bit and improved it that purpose:
$('.main-menu-list-items > .dropdown').click(function() {
var $this = $(this); // performance, so we do not have to call $(this) multiple times
if(!$this.hasClass('show')) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});
Then add this to your CSS. This works because you previously have hidden this element within your CSS:
.show .dropdown-content {
display: block;
}
As a side note: remove onclick="myFunction()". You do not have this function defined, so it will only give you errors in the console.

The first thing you might want to fix is your HTML. The only allowed direct descendants of a ul are li, do remove the divs. Also, you have a few instances in your HTML where your closing brackets are in the wrong place, thus creating invalid HTML.
Here's a simple format for a menu, but you'd have to redo your CSS to use it:
<nav>
<ul>
<li class="dropdown">
<a href="#" >Products</a>
<ul class="sub-menu">
<li class="dropdown">
Clarinet
<ul class="sub-menu">
<li>Bb Clarinet</li>
<li>Bb Bass Clarinet</li>
<li>Eb Clarinet</li>
<li>Alto Clarinet</li>
<li>Bb German Clarinet</li>
<li>Bb Contrabass Clarinet</li>
</ul>
</li>
<li>
Saxophone
</li>
<li>
Flute
</li>
<li>
Bassoon
</li>
<li>
Recorder
</li>
<li>
Brass
</li>
<li>
Guitar
</li>
<li>
Paino
</li>
<li>
Orchestral
</li>
<li>
Percussion
</li>
</ul>
</li>
<li>
Shop By Brands
</li>
<li>
How to Order
</li>
<li>
Quick Order
</li>
<li>
About Us
</li>
</ul>
</nav>
Then, to show the sub-menu, regardless of how many times it's nested, you could do something like:
$('.dropdown').on('click', function() {
$(this).children('.sub-menu').toggleClass('hideSubMenu');
});

Thank you for all that helped me with this question!!
I completely re-did my HTML because I realized there were tons of errors.
HTML:
<nav>
<ul id="main-bar">
<li class="dropdown">
Product
<!--sub-menu will hold all contents in dropdown --list items-->
<ul id="product-bar" class="sub-menu">
<li>Clarinet</li>
<li>Saxophone</li>
<li>Flute</li>
<li>Bassoon</li>
<li>Recorder</li>
<li>Brass</li>
<li>Guitar</li>
<li>Piano</li>
<li>Orchestral</li>
<li>Percussion</li>
</ul><!--closes product-bar-->
</li><!--closes product list item that is holding all the products-->
<li>Shop By Brands</li>
<li>How to Order</li>
<li>Quick Order</li>
<li>About Us</li>
</ul><!--closes main-bar-->
</nav>
I re-did my CSS as well:
body {
margin:0;
padding:0;
}
#main-bar {
list-style-type:none;/*removes bullets*/
height:50px;/*sets height of main-bar to same height as li's in #main-bar*/
}
#main-bar > li {
float:left;/*puts list items next to each other*/
border:1px solid black;
padding:15px 80px;
}
#main-bar > li > a {
text-decoration:none;/*removes underline from link*/
}
#product-bar {
position: absolute;
min-width: 1154px
border:1px solid black;
margin-left:-81px;
margin-top:15px;
height:50px;
list-style-type:none;
display:none
}
#product-bar > li {
float:left;
padding:15px 30px;
}
#product-bar > li > a {
text-decoration:none;
}
.show #product-bar {
display:block;
}
And finally, I went with this approach for the JQuery
JQuery:
$('.dropdown').on('click', function() {
var $this = $(this);times
if(!$this.hasClass('show')) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});

Multi-level dropdown navigation - keep secondary dropdown closed

so I am relatively new to coding and I am trying to make a multilevel dropdown menu, that when opened shows the links for the first level but doesn't show the second level links until clicked.
I started with a fork from codepen and have the navigation built, but I do not know what script to add to close the secondary links.
// open mobile menu
$('.js-toggle-menu').click(function(e){
e.preventDefault();
$('.mobile-header-nav').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle').click(function(e){
e.preventDefault();
$('.subnav1').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle2').click(function(e){
e.preventDefault();
$('.subnav2').slideToggle();
});
$('.sub-toggle3').click(function(e){
e.preventDefault();
$('.subnav3').slideToggle();
});
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.mobile-nav-wrap {
/* display: none; */
}
}
.mobile-header-nav {
background-color: #222222;
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100px;
width: 100%;
}
.mobile-header-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
color: white;
display: block;
padding: 15px 15px;
text-align: left;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
background-color: #2f2f2f;
}
a.mobile-menu-toggle {
padding-left: 50px;
color: #52575f;
text-decoration: none;
background: #eeeff0;
font-size: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav1">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle2" href="#">Resources</a>
<ul class="subnav2">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle3" href="#">Service</a>
<ul class="subnav3">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
The codepen that I am working on can be found here:
Codepen Link
Any advice is welcome

You can just add some CSS to hide the sub nav initially, like this:
.subnav1, .subnav2, .subnav3 {
display: none;
}
You may want to also change the classes so they are a little more generic, like just use a class of subnav and sub-toggle instead of subnav1, sub-toggle2, etc. Then you can have just one CSS rule and one event handler regardless of how many menu items you add. So your CSS for hiding the sub nav would just be:
.subnav {
display: none;
}
And your javascript to toggle all of the menu items is reduced to just:
$('.sub-toggle').click(function(e){
$(this).next('.subnav').slideToggle();
$(this).toggleClass('open');
});
I updated your code pen with an example here.

You may try this. The changes are only done to js logic.
Also, I'm not sure why you have e.preventDefault(). You only need it if you are trying to avoid submit a form. So I took them out.
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Resources</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Service</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
<script>
$().ready(function()
{
$('.js-toggle-menu').click(function(e){
$('.sub-toggle').slideToggle();
$('.sub-toggle').each(function()
{
$(this).closest('li').find('.subnav').hide();
});
});
$('.sub-toggle').click(function(){
$(this).closest('li').find('.subnav').slideToggle();
});
});
</script>

How to Make a Menu Like Stack Overflow's

I really like the way Stack Overflow has done their dropdown menus on the top. Notice how you must click in order for the dropdown to trigger, but you still must hover to get the dropdown. There is also what seems to be groups - once you click, hover will activate the menus shown in the picture. It is hard to explain, but if you play around for a minute you'll see what I mean. Also, it is important that the last hovered menu will show until a user clicks off again.
Here is what I have so far; note that I almost have the same functionality, except for the last menu hovered doesn't stay dropped (it closes on mouseout when it shouldn't until off-click) and the toggle functionality is sketchy:
$(document).ready(function() {
var depressed = false;
$('.menu').click(function() {
depressed = true;
$('.menu').toggleClass('active');
});
$('.menu').hover(function() {
if (depressed) {
$('.menu').toggleClass('active');
}
});
});
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
padding: 10px 20px;
background: #333;
color: #eee;
}
ul li.active:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
border: 2px solid #555;
}
ul li ul li {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu">button 1
<ul>
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
<li class="menu">button 2
<ul>
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
<li class="menu">button 3
<ul>
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
</ul>
My JS is not cuttin git.
So, what is the best way to go about this?

I haven't peeked into the SO menu, so I don't know how they did it. But this seems to work nicely.
A click on one of the buttons opens the dropdown.
The dropdown is not closed by a 'mouseout', like in your code, but only when another menu is hovered. If you hover outside of the menu area, the lastly hovered menu remains open.
Clicking anywhere closes the menu.
So showing the menu is not directly done by using a :hover pseudo element in CSS, but by adding a class, which remains there even when the menu is unhovered. I think the net result behaves pretty close to Stack Overflow's.
$(function(){
// The event to handle clicks outside of the menu. This will close the menu.
var offEvent =
function(event){
$('.menu-bar').removeClass('active');
$(document).off('click', offEvent);
};
// The click event on the menu buttons, to toggle 'menu mode' as it were.
$(document).on('click', '.menu-bar .menu',
function(event){
event.preventDefault();
$('.menu-bar').addClass('active');
$(this).addClass('active');
// Leave menu mode by clicking anywhere of the menu.
$(document).on('click',
offEvent
);
});
// Hover toggles between the dropdowns of the separate menus.
$('.menu-bar .menu').hover(
function(event){
var $current = $(this);
$('.menu').each(
function(index, element){
var $element = $(this);
if ($element.get(0) == $current.get(0)) {
$element.addClass('active');
} else {
$element.removeClass('active');
}
});
});
});
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
padding: 10px 20px;
background: #333;
color: #eee;
}
ul li ul {
display: none;
position: absolute;
border: 2px solid #555;
}
ul li ul li {
display: block;
}
.menu .dropdown {
display: none;
}
.menu-bar.active .menu.active .dropdown {
display: block;
}
.menu {
display: inline-block;
position: relative;
border: 1px solid grey;
}
.menu .dropdown {
position: absolute;
top: 100%;
left: 0;
border: 2px solid #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-bar">
<li class="menu">button 1
<ul class="dropdown">
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
<li class="menu">button 2
<ul class="dropdown">
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
<li class="menu">button 3
<ul class="dropdown">
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
</ul>

$(document).ready(function() {
$('#M1').click(function() {
$('#M1').toggleClass('active');
$('#M2').removeClass('active');
$('#M3').removeClass('active');
});
$('#M2').click(function() {
$('#M2').toggleClass('active');
$('#M1').removeClass('active');
$('#M3').removeClass('active');
});
$('#M3').click(function() {
$('#M3').toggleClass('active');
$('#M1').removeClass('active');
$('#M2').removeClass('active');
});
});
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
padding: 10px 20px;
background: #333;
color: #eee;
}
ul li.active ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
border: 2px solid #555;
}
ul li ul li {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu" id='M1'>button 1
<ul>
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
<li class="menu" id='M2'>button 2
<ul>
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
<li class="menu" id='M3'>button 3
<ul>
<li>sub button 1</li>
<li>sub button 2</li>
</ul>
</li>
</ul>
This works for me.
I've just removed :hover from the end of the .active class and made an individual function for each button.

How can I make my vertical drop down menu with an ease effect?

JSFiddle # http://jsfiddle.net/UqyAq/
html -
<nav>
<ul>
<li>Button 1</li>
<li>Button 2
<ul>
<li>Sub-Button 1</li>
<li>Sub-Button 2</li>
<li>Sub-Button 3</li>
</ul>
</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
</ul>
</nav>
css -
* {
margin: 0;
padding: 0;
}
nav {
height: 100%; width: 18%;
position: absolute;
}
nav ul {
list-style-type: none;
font-family: 'Universal Accreditation', Serif;
font-size: 18pt;
letter-spacing: 1px;
font-variant: small-caps;
color: black;
}
nav ul ul {
display: none;
}
nav ul li {
display: block;
}
nav ul li:hover ul {
display: block;
}
Basically, you are looking at a simple un-ordered list drop down menu. I am trying to figure out what I need to use to create an easing effect on the drop down of the second tier. Hovering over 'Button 2' will bring up the sub-menu.
Notice how its a one jump movement. How would I slow it down? Maybe look like the sub-menu is sliding out from under 'Button 2'?
Should I use javascript or css?

Use this code..
HTML:
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li> Sub Link 1.1.1</li>
<li> Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
CSS:
.submenu
{
display: none;
}
#menu li ul{
margin-left:15px;
}
JQUERY:
$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
$('ul:first', this).each(function () {
var p = $(this).parent();
$(this).css('top', p.position().top)
.css('left', p.position().left + p.width())
.show();
});},
function () { $('ul:first', this).hide(); }
);
});