We Keep Coding

Problem with a Jquery toggleClass script when hovering

I'm new to the community, also pretty new in this world of web programming, this is the issue that is driving me nuts,
I tried this code to add a class when I hover the ul list element, so I can display the nav element, but instead of open only the hovered dropdown menu, it displays all the ul element with the class I selected.
Here is the Jquery code:
$(document).ready(function() {
$("ul").hover(function() {
$(this)
.find(".dropdown-list")
.toggleClass("dropdown-menu");
});
});
and these are the element targered in my html file:
<ul class="header-nav-responsive">
<li>HOME</li>
<li>
LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>
FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
Here is the CSS snippet:
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu, .nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0,0,0,.1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu, .nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li, .nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a, .nav-icons-big-screen .dropdown-menu li a{
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover, .nav-icons-big-screen .dropdown-menu li a:hover {
color:#2250fc;
}
At last, you can see how the page display in this link: https://patricio1984.github.io/Polo-template-emulation/
Thanks so much to all in advance! cheers!

The problem is because you are adding the event listener to the ul tag(This includes the parent ul too). Instead, you should have an event listener to the li, say with the class 'menu-item' and toggle the class based on that.
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
Here is the fiddle link https://jsfiddle.net/eskcrd3n/

Actually your issue here is lies under your main selector. You did go for listening to ul whilst you should listen to li elements. So whenever you listening to ul, the $(this) will refer to <ul class="header-nav-responsive"> so all your elements with class dropdown-list will be called for the trigger event.
$(document).ready(function() {
$("li").hover(function() {
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu,
.nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0, 0, 0, .1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu,
.nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li,
.nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a,
.nav-icons-big-screen .dropdown-menu li a {
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover,
.nav-icons-big-screen .dropdown-menu li a:hover {
color: #2250fc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-nav-responsive">
<li>HOME</li>
<li>LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
NOTE: The best way to do this is to use a unique class for your menu titles to avoid any inconsistency.

THANKS SO MUCH to both you guys!! the Jsfiddle gave me the right idea, here is the corrected function:
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
And I added the menu-item class to all my li items!
Thanks!!! problem SOLVED! That was pretty quick =)

Ignore overflow of parent element [duplicate]

This question already has answers here:
Make floating child visible outside an overflow:hidden parent
(6 answers)
Closed 4 years ago.
I have a the following dropdown html structure and css, it's parent has an overflow hidden -
The problem I am having is that when you select the dropdown, it is cut off by the overflow hidden, I need it to ignore the overflow.
I have looked at changing the dropdowns position to fixed, but then I would need to calculate its position for each dropdown, any other suggestions would help!
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
}
<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>
See working JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/
The structure is built using a plugin which sets the html and css. I am able to change the css but not the html structure. I also cant change the height of the parent, it needs to be scrollable if there are multiple dropdowns.

Use position:absolute and use margin or translate to adjust the position. Then don't add position:relative to the parent element so it get ignored by the overflow.
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
position:absolute;
margin-left:100px;
margin-top:-10px;
}
<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>

Mouseenter only fires on first mouseenter attempt

I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity

I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>

Full width menu JavaScript selector

Okay so here is a cut down of what I have so far JSFiddle. Hovering over 'Aviation' brings down the menu. I would like it so that when you open the menu the first menu item is already set to active but also need the current hovered selection to stay selected when they move over the the "Related Links" side of the drop down.
I know very little JS but this is what I have come up with so far to make the menu appear.
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$(".aviation-menu").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("#top li").hover(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
});
Any help would massively be appriciated thank you.

I think you can use it like below, I gave the Jsfiddle link at the bottom as well:
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("li").hover(function() {
$("li").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
JSFIDDLE
Basically you will be removing all the "active" classes on the other list items when any of them gets hovered, so it will have one active all the time.
Edit: You can also add this $("li").first().addClass("active"); at the beginning so it will have "Home" as active by default.

You should consider the following: There is no "hovering" on mobile devices and what you're doing with JS (adding a class on hover, but actually what you want is a visual change) can be done with CSS, which is nicer in my opinion.
Here is a great example of a pure CSS dropdown menu by Phil Hoyt: http://codepen.io/philhoyt/pen/ujHzd
HTML:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}

CSS not displaying in old versions of IE

We are still using an old version of SharePoint (2007) and I have begun to try and learn how you use CSS and Content Editor WebParts (CEWPs) to adjust the way some of our lists work. I am trying to create a small row of drop downs within a web part that will have hyperlinks to sections. This is the HTML code I am using which displays correctly via Chrome:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
For some reason when I put this into a CEWP and use IE it doesn't use the CSS code at all and displays as HTML, but if I open the same page in Chrome is displays fine.
Can anyone offer any suggestions on how I can get old versions of IE to display this bit of CSS within MOSS 2007 please?