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.

About jquery Click to add CSS and other elements to remove CSS. How to do it?

I have a project that when I click titleA, all blocks of titleA must be added with a yellow style, and when titleB is clicked, a yellow style must be added to the titleB page, and the yellow style of titleA will be removed!
But I don’t know this. How to achieve the effect, I need some help from everyone, thank you.
$('#js-title1').on('click',function(){
$('#js-title1').addClass('active'); //點擊到的增加樣式
　$('#js-title2').removeClass('active') //同層其他元素移除樣式
})
body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>
<ul class="wrap-2">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>

There are multiple js-title1 & js-title2, do not use ID, consider to use css class name.
$('.js-title1').on('click',function(){
$('.js-title1').addClass('active'); //點擊到的增加樣式
　$('.js-title2').removeClass('active') //同層其他元素移除樣式
})
$('.js-title2').on('click',function(){
$('.js-title2').addClass('active'); //點擊到的增加樣式
　$('.js-title1').removeClass('active') //同層其他元素移除樣式
})
body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>
<ul class="wrap-2">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>

IDs must be unique. You can't have more than one on the same page. Perhaps use a data attribute instead. Here's a stripped down example.
// When any title is clicked on
$('.demo').on('click', function() {
// Get the id from the dataset
const id = $(this).data('id');
// Remove all the active classes
$('.demo').removeClass('active');
// Add a class to all those elements that
// have a data-id that matches the id
$(`[data-id="${id}"`).addClass('active');
});
.active { background: #FFEB50; }
.demo:hover { cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>
Additional documentation
Template/string literals

Instead of the id attribute use the class attribute
and in jQuery, get the elements with . instead of #

Other than unique ids you should use ‘event.currentTarget’ or ‘$(this)’ to refer to the element and can use ‘.toggleClass()’ to toggle classes. This will simplify the code and logic.
const groups=[$("[id=js-title2]"), $("[id~='js-title1']")]
groups[0].on('click',function(e){
groups[0].toggleClass('active');
groups[1].removeClass('active');
})
groups[1].on('click',function(e){
groups[0].removeClass('active');
groups[1].toggleClass('active');
})
body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>
<ul class="wrap-2">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>

How to make the dropdown menu collapse when not in use

So I have a dropdown menu and when I click it it works but when I click out it stays open. I've tried using mouseout mousedown onclick ondblclick etc but none of them work. Please help :(
[What I've tried][1]

Attach click listener to your document, if clicked element is img then display dropwdown else hide.
const menu = document.querySelector('#dropdown');
document.addEventListener('click', function(e) {
menu.classList.toggle('show', e.target.tagName == "IMG");
});
.menu {
float: right;
margin: 24px;
position: relative;
display: inline-block;
}
.menu img {
cursor: pointer;
}
.dropdown {
position: absolute;
z-index: 1;
float: right;
width: 150px;
background-color: lightgray;
top: 73px;
right: -24px;
display: none;
}
.dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
color: #B00D93;
font-weight: bold;
}
.show {
display: block;
}
<div class="menu" id="menu">
<img src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2018/06/Screen-Shot-2018-06-13-at-8.07.34-PM.png" id="dropdownImg" alt="" width="45px" height="45px">
<div class="dropdown" id="dropdown">
Home
About Us
Services
Feedback
</div>
</div>

check this : https://jsfiddle.net/85yz7asd/
showHide = () => {
var dropdown = document.getElementById("dropdown")
dropdown.style.display == "block" ? dropdown.style.display = "none" : dropdown.style.display = "block"
}

This is a Pure HTML and CSS example:
HTML
<div class="dropdown">
<div class="dropdown-btn">Hover Me</div>
<ul class="dropdown-list">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.dropdown {
display: block;
position: absolute;
}
.dropdown-btn {
text-align: center;
background-color: black;
color: white;
display: block;
position: absolute;
width: 200px;
height: auto;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.dropdown-list {
position: relative;
display: none;
width: 200px;
height: auto;
list-style: none;
margin-top: 40px;
padding: 0;
}
.dropdown-list li a {
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
width: 200px;
background-color: black;
color: white;
margin-top: 5px;
}
.dropdown-list li a:hover {
background-color: grey;
color: white;
}
.dropdown:hover .dropdown-list {
display: block;
}
working js fiddle

If you want to use your current code, try this.
Clicking on the dropdownImg element will open the menu.
Clicking anywhere else will close the menu.
https://jsfiddle.net/t6wpgjrd/
document.onclick = function(e) {
if(e.target.id === "dropdownImg") {
show();
}
else{
hide();
}
}
And don't forget to remove the onclick and onblur attributes from your dropdownImg element.

Why is my list not stacking on top of each other?

I have a fixed header menu bar at the top of the webpage. Each of the titles is a link but I want a dropdown for the first link. The link components for the dropdown menu is behaving strangely, see image:
I would like the link components to be stacked on top of each other, like a proper dropdown. Below is my code:
It looks correct when I run the code snippet but when I did these codings in Visual Studio, the codings below looks just like the image.
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
<div className="linkWrapper">
Quicklinks<i class="fa fa-angle-double-down"></i>
</div>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.linkWrapper a:first-child {
display:block;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}

remove the float for the submenu items adding
.navlist li div a {
float: none;
}
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist li div a {
float: none;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

UPDATE
Your code snippet already set links to display: block and it works as expected, your issue seems to come from somewhere else, maybe css overrides elsewhere in your project ?
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
ORIGINAL ANSWER
You're using a tags which by default are displayed inline, you could add some styling to your a to display: block or use a list :
Quicklinks<i class="fa fa-angle-double-down"></i>
<ul>
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
You may want to make this list unstyled to avoid dots.
Also to behave like a proper dropdown, this list should be hidden on first render and you will trigger the visibility with another js function listening on click event on your "Quicklinks" link. Something like :
var button = document.getElementById("dropdownButton");
var menu = document.getElementById("dropdownMenu");
button.addEventListener("click", function(e) {
menu.classList.toggle("hidden");
});
.hidden {
display: none;
}
Quicklinks
<ul id="dropdownMenu" class="hidden">
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>

this is because your css have :
.navlist li {
float: left;
}
just remove it and add to .navlist a
clear: both;
}
complete code :
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/* just example */
.navlist div {
margin-left: 1em;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
/* adding : ( work with -- float: left -- allready present in -- .navbar a -- */
clear: both;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks <i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

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.