Develop Reference

I want to hide my navbar (ul) when links in the navbar are clicked. How to do that? Here’s the code

Whenever I click the link of navbar on mobile view, its overriding with content and ul is not collapsing. I want to hide my navbar (ul) when links in the navbar are clicked. How to fix this issue? Please help.
Here’s the code:
<nav>
<div class="navbar" >
<input type="checkbox" name="check" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class ="logo">B</label>
<ul>
<li><a class="active" href="#Home" >Home</a></li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
/* css*/
nav{
background-color: rebeccapurple;
height: 57px;
width: 100%;
position:fixed;
}
label.logo{
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 60px;
padding: 0px 11px;
border: 4px solid white;
border-radius: 11px;
margin-left: 39px;
opacity: 0.8;
}
nav ul{
float: right;
margin-right: 94px;
}
nav ul li{
display:inline-block;
line-height: 60px;
}
nav ul li a{
color: white;
font-size: 15px;
font-size: bolder;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
padding: 7px 13px;
}
a.active, nav ul li a:hover {
background-color: rgb(199, 130, 255);
border-radius: 3px;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*for navbar responsiveness*/
#media (max-width: 952px){
label.logo{
font-size: 30px;
}
nav ul li a{
font-size: 13px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #1f1d27;
top: 61px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 30px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover, a.active{
background: none;
background-color: rebeccapurple;
border-radius: 2px;
}
#check:checked ~ ul{
left: 0;
}
nav ul li a:active {
left: 0;
transition: all .5s;
}
}
Whenever I click the link of navbar on mobile view, its overriding with content and ul is not collapsing. I want to hide my navbar (ul) when links in the navbar are clicked. How to fix this issue? Please help.

you can add the script for whenever you click the navbar, and adding the class style to the ul
check this video for the evidence :D
video
const navtabs = document.querySelectorAll('a')
const ul = document.querySelector('ul')
for( let i = 0; i < navtabs.length;i++){
navtabs[i].addEventListener('click', function(){
ul.classList.add('clicked')
})
}
nav {
background-color: rebeccapurple;
height: 57px;
width: 100%;
position: fixed;
}
label.logo {
color: white;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 60px;
padding: 0px 11px;
border: 4px solid white;
border-radius: 11px;
margin-left: 39px;
opacity: 0.8;
}
nav ul {
float: right;
margin-right: 94px;
}
nav ul li {
display: inline-block;
line-height: 60px;
}
nav ul li a {
color: white;
font-size: 15px;
font-size: bolder;
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
padding: 7px 13px;
}
a.active,
nav ul li a:hover {
background-color: rgb(199, 130, 255);
border-radius: 3px;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/*for navbar responsiveness*/
#media (max-width: 952px) {
label.logo {
font-size: 30px;
}
nav ul li a {
font-size: 13px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
/* idk in my code this possition is not working,and then i comment this style */
/* position: fixed; */
width: 100%;
height: 100vh;
background: #1f1d27;
top: 61px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 30px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
background-color: rebeccapurple;
border-radius: 2px;
}
#check:checked ~ ul {
left: 0;
}
nav ul li a:active {
left: 0;
transition: all 0.5s;
}
/* you can create new style for to add in the ul */
.clicked{
opacity: 0;
}
}
<nav>
<div class="navbar">
<input type="checkbox" name="check" id="check" />
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">B</label>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>

Dropdown menu from hover to onclick

How would I convert the following sub-navigation menu from hover to on-click with j-query? In the example I have added an active class and used j-query to display the sub-nav however it disappears after the user clicks it.
https://codepen.io/patriciaworth/pen/bGGMBow
I followed the instructions on this webpage to no avail.
how to change dropdown menu from hover to onclick
HTML
<!DOCTYPE html>
<html>
<head>
<title>Liive Real Estate</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li>Home</li>
<li>
Property
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>
Agents
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>Pages</li>
<li>Contact</li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>
</body>
</html>
SCSS
/*reset*/
*
{
margin: 0;
padding:0;
list-style-type: none;
border: none;
text-decoration: none;
}
html
{
width:100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;
//fonts
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;
//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;
.panel
{
display: block;
}
.navbar
{
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: $heading-font;
padding: 0 20px;
#media screen and (max-width: $medium)
{
display: block;
padding: 0;
}
.logo
{
flex:1;
text-align: left;
font-size: 22px;
color: $purple;
font-weight: 500;
#media screen and (max-width: $medium)
{
display: block;
border-bottom: 1px solid $purple;
text-align: left;
padding: 20px;
}
}
.toggle
{
display: none;
#media screen and (max-width: $medium)
{
display: block;
position: absolute;
top: 20px;
right:20px;
font-family: $heading-font;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.panel
{
flex: 7;
display: flex;
align-items: center;
justify-content: center;
#media screen and (max-width: $medium)
{
display: none;
}
.links
{
flex:6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
}
ul
{
display: block;
width: 100%;
#media screen and (max-width: $medium)
{
padding: 20px 0;
}
}
li
{
display: inline-block;
#media screen and (max-width: $medium)
{
display: block;
}
}
ul li a
{
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
#media screen and (max-width: $medium)
{
padding:5px 0;
}
}
ul li a:hover
{
background: $purple;
color: #fff;
}
ul li ul
{
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
#media screen and (max-width: $medium)
{
position: relative;
top:0;
width: 100%;
}
}
ul li ul li
{
display: block;
text-align: left;
#media screen and (max-width: $medium)
{
text-align: center;
}
a
{
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
&:hover
{
color: $purple;
background: transparent !important;
}
}
}
ul li:hover ul
{
display: block;
}
ul li:hover a
{
background: $purple;
color: #fff;
}
/*THIS DOES NOT WORK*/
/*.active
{
display: block !important;
a
{
background: $purple;
color: #fff;
}
}*/
.signup
{
flex:1;
text-align: right;
button
{
border: 1px solid $purple;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
&:hover
{
background: $purple;
color: #fff;
}
}
#media screen and (max-width: $medium)
{
text-align: center;
padding-bottom: 20px;
display: block;
}
}
}
JS
$(document).ready(function(){
$(".toggle").click(function(){
$("nav .panel").slideToggle();
});
/*THIS DOES NOT WORK*/
/*$("nav").on("click", "li", function(){
$(this).children("ul").toggleClass("active");
$("nav li").not(this).children("ul").removeClass("active");
});*/
});

You can directly covert the hover class into an active class, and then on click, toggle the active class. Find the below snippet and view in full screen so that its not affected by the media-queries.
Additinally, you need to include href="#" or else it will reload the page.
ul li.active ul {
display: block;
}
ul li.active a {
background: $purple;
color: #fff;
}
$(document).ready(function() {
$(".toggle").click(function() {
$("nav .panel").slideToggle();
});
$("nav").on("click", "li", function() {
$('nav li.active').not(this).removeClass("active"); // remove previous selection
$(this).toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
/*reset*/
* {
margin: 0;
padding: 0;
list-style-type: none;
border: none;
text-decoration: none;
}
html {
width: 100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
.panel {
display: block;
}
.navbar {
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
padding: 0 20px;
/*THIS DOES NOT WORK*/
/*.active {
display: block !important;
a {
background: $purple;
color: #fff;
}
}
*/
}
#media screen and (max-width: 992px) {
.navbar {
display: block;
padding: 0;
}
}
.navbar .logo {
flex: 1;
text-align: left;
font-size: 22px;
color: #a491d3;
font-weight: 500;
}
#media screen and (max-width: 992px) {
.navbar .logo {
display: block;
border-bottom: 1px solid #a491d3;
text-align: left;
padding: 20px;
}
}
.navbar .toggle {
display: none;
}
#media screen and (max-width: 992px) {
.navbar .toggle {
display: block;
position: absolute;
top: 20px;
right: 20px;
font-family: 'Poppins', sans-serif;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.navbar .panel {
flex: 7;
display: flex;
align-items: center;
justify-content: center;
}
#media screen and (max-width: 992px) {
.navbar .panel {
display: none;
}
}
.navbar .panel .links {
flex: 6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
.navbar ul {
display: block;
width: 100%;
}
#media screen and (max-width: 992px) {
.navbar ul {
padding: 20px 0;
}
}
.navbar li {
display: inline-block;
}
#media screen and (max-width: 992px) {
.navbar li {
display: block;
}
}
.navbar ul li a {
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
}
#media screen and (max-width: 992px) {
.navbar ul li a {
padding: 5px 0;
}
}
.navbar ul li a:hover {
background: #a491d3;
color: #fff;
}
.navbar ul li ul {
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
}
#media screen and (max-width: 992px) {
.navbar ul li ul {
position: relative;
top: 0;
width: 100%;
}
}
.navbar ul li ul li {
display: block;
text-align: left;
}
#media screen and (max-width: 992px) {
.navbar ul li ul li {
text-align: center;
}
}
.navbar ul li ul li a {
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
}
.navbar ul li ul li a:hover {
color: #a491d3;
background: transparent !important;
}
.navbar ul li.active ul {
display: block;
}
.navbar ul li.active a {
background: #a491d3;
color: #fff;
}
.navbar .signup {
flex: 1;
text-align: right;
}
.navbar .signup button {
border: 1px solid #a491d3;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
}
.navbar .signup button:hover {
background: #a491d3;
color: #fff;
}
#media screen and (max-width: 992px) {
.navbar .signup {
text-align: center;
padding-bottom: 20px;
display: block;
}
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li>Home</li>
<li>
Property
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>
Agents
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>Pages</li>
<li>Contact</li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>

You can search element like immediate siblings next to <a> tag which is <ul>:
$('a+ul').click()
or search all the items
you can get one more deep:
$('a+ul>li').click()
+ immediate sibilin
> all children

The code for my navbar does not work properly

I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

mobile view issue when the menu opened?

when opening the menu and scroll down the navbar still move
I want when open the menu prevents the scroll
I implemented the below code for responsive navbar but I'm facing an issue on the mobile view only
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
any help on that issue, please
note: i hide the banner above the navbar on the mobile view but on the big screen view not hidden

Add 'overflow:hidden' to body when menu is open. it will solve your problem.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
$('body').css('overflow', 'hidden');
}
else
{
$('nav').removeClass('fixed');
$('body').css('overflow', 'auto')
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
left:0;
/* bottom:0;
overflow:auto; */ /* if you want scroll inside menu */
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
top:0;
left:0;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

CSS transition inline menu

I need to do inline menu with transition.
I tried to recode some example into my requirement, but I have a problem with a:hover class - maybe some problem in js class.
But I have no idea how to get a red background under the main link (dropdbtn class) while I scrolling to submenu.
$(document).ready(function() {
console.log("ready!");
$(".dropdown-content").mouseenter(function() {
$(this).prev().addClass('href-hovered');
})
$(".dropdown-content").mouseleave(function() {
$(this).prev().removeClass('href-hovered');
})
});
.nav {
width: 1200px !important;
height: 50px;
padding-bottom: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
}
.nav a.dropbtn {
display: block;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
}
.nav a.dropbtn:hover {
display: block;
//padding:20px 40px;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
background: red;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.dropdown {
float: left;
background: white;
position: relative;
width: 170px;
min-height: 50px;
}
.dropdown > a {
color: black;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown > a:hover {
color: black;
background: red;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown .dropdown-content {
position: absolute;
transform: translate3d(0, -100%, 0);
transition: transform .2s ease-in;
z-index: -1;
left: 0;
}
.dropdown:hover .dropdown-content {
transform: translate3d(0, 0, 0);
transition-duration: .4s;
transition-timing-function: ease-out;
z-index: 1;
}
.dropdown-content {
background: red;
list-style: none;
width: 170px;
white-space: nowrap;
}
.dropdown-content a {
display: block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
z-index: 100 !important;
}
.nav .red {
color: #ff6600;
font-family: 'webfont';
font: 1.8em;
}
.nav .green {
color: #00cccc;
font-family: 'webfont';
}
.nav a:hover .red {
color: white;
padding-top: 20px;
font-family: 'webfont';
}
.nav a:hover .green {
color: white;
font-family: 'webfont';
}
.nav a.dropbtn.href-hovered .green {
color: white;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a.dropbtn.href-hovered .red {
color: white;
padding-top: 20px;
z-index: 2;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a:hover .red,
a:hover .green {
color: white;
font-family: 'webfont';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul>
<li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a>
<ul class="dropdown-content">
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
</ul>
</li>
</ul>
<nav>

As Mihailo said, your menu is kind of chaotic and overly complex. But to achieve your requirement, just change the style definition
nav a.dropbtn:hover
to
nav:hover a.dropbtn
to have the rule applied when the nav block itself is hovered.

Just added background-color: red; to .nav a.dropbtn. If im correct in understanding this is what you want right?