Navigation submenu is coming down with scroll

Question

I have made this navigation, everything works well. However, while I was testing I realised that if you hover on the first nav and scroll down, you will see that the submenu is coming with the mouse as well. How can I avoid it?

Note: Run it in full (desktop) screen size.

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; $('#nav-icon3').toggleClass('open'); } else { x.className = "topnav"; $('#nav-icon3').toggleClass('open'); } } $(".dropbtn").bind("click", function() { if ($(window).width() < 1150) { $(this).next().toggle(); } });

 .border-bottom { width: 100vw; border-bottom: 3px solid #eee; bottom: -11px; z-index: 100; padding: 0 !important; position: absolute; } .logo { float: left; } .logo img { width: 290px; } .custom-navi { margin: 0; padding: 0 55px; } .topnav { overflow: hidden; float: right; } .dropbtn i { font-size: 27px; font-weight: bold; top: 2px; position: relative; } .topnav a { float: left; display: block; color: #009fda; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; font-weight: bold; } .topnav .icon { display: none; padding-top: 5px; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 20px; border: none; font-weight: bold; background-color: white; outline: none; color: #009fda; padding: 14px 22px; font-family: inherit; margin: 0; } @media only screen and (min-width:1300px) and (max-width:1600px) { .custom-navi { padding: 0 1.5% 0 1.7%; } } @media only screen and (min-width:1150px) and (max-width:1300px) { .topnav { float: left; width: 100%; } .dropdown .dropbtn:nth-child(1) { padding-left: 0px; } } @media screen and (max-width: 1150px) { .dropdown-content { display: none; position: fixed; min-width: 160px; padding-top: 18px; padding-bottom: 18px; z-index: 999; background-color: white; } } .dropdown-content a { float: none; color: #009fda; padding: 8px 24px; text-decoration: none; display: block; text-align: left; font-weight: normal; } .topnav a:hover, .dropdown:hover .dropbtn { color: #002776; } @media screen and (max-width: 1150px) { .dropdown:hover .dropdown-content { display: block; } } @media screen and (min-width: 1150px) { .dropdown-content { visibility: hidden; opacity: 0; position: fixed; min-width: 160px; padding-top: 18px; padding-bottom: 18px; z-index: 999; background-color: white; } .dropdown:hover .dropdown-content { visibility: visible; opacity: 1; -moz-transition: opacity 300ms ease-in, visibility 300s ease-in; -o-transition: opacity 300ms ease-in, visibility 300s ease-in; -webkit-transition: opacity 300ms ease-in, visibility 300s ease-in; transition: opacity 300ms ease-in, visibility 300s ease-in; } } @media screen and (max-width: 1150px) { .topnav a, .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1150px) { .logo img { padding-left: 11px; } .custom-navi { margin: 0; padding: 0px; } .topnav.responsive { position: relative; width: 100%; margin-top: 15px; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .dropdown-content { position: relative; padding-left: 10px; padding-top: 0px; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; padding: 14px 16px; } } .active { color: #002776 !important; } #nav-icon3 { width: 40px; height: 40px; top: 7px; position: relative; margin: 0px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 5px; width: 100%; background: #009fda; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /* Icon 3 */ #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 12px; } #nav-icon3 span:nth-child(4) { top: 24px; } #nav-icon3.open span:nth-child(1) { top: 12px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 12px; width: 0%; left: 50%; } .main { background-color: #eee; width: 100vw; height: 100vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="custom-navi"> <div class="logo"> <a href="#">LOGO</a> </div> <div class="topnav" id="myTopnav"> <!-- Navigation element mit subnavi--> <div class="dropdown"> <button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i> </button> <div class="dropdown-content"> <!-- Subnavi Elements--> <a>Contact persons</a> <a>Contact persons</a> <a>Contact persons</a> <a>Contact persons</a> </div> </div> <!-- Navigation element mit subnavi--> <div class="dropdown"> <button class="dropbtn">IT </button> <!-- Subnavi Elements--> </div> <a href="javascript:void(0);" style="" class="icon" onclick="myFunction()"> <div id="nav-icon3"> <span></span> <span></span> <span></span> <span></span> </div> </a> </div> </section> <br><br><br><br> <div class="main"> Page Body </div>

Answer 1

Use position: absolute instead of position: fixed :

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; $('#nav-icon3').toggleClass('open'); } else { x.className = "topnav"; $('#nav-icon3').toggleClass('open'); } } $(".dropbtn").bind("click", function() { if ($(window).width() < 1150) { $(this).next().toggle(); } });

 .border-bottom { width: 100vw; border-bottom: 3px solid #eee; bottom: -11px; z-index: 100; padding: 0 !important; position: absolute; } .logo { float: left; } .logo img { width: 290px; } .custom-navi { margin: 0; padding: 0 55px; } .topnav { overflow: hidden; float: right; } .dropbtn i { font-size: 27px; font-weight: bold; top: 2px; position: relative; } .topnav a { float: left; display: block; color: #009fda; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; font-weight: bold; } .topnav .icon { display: none; padding-top: 5px; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 20px; border: none; font-weight: bold; background-color: white; outline: none; color: #009fda; padding: 14px 22px; font-family: inherit; margin: 0; } @media only screen and (min-width:1300px) and (max-width:1600px) { .custom-navi { padding: 0 1.5% 0 1.7%; } } @media only screen and (min-width:1150px) and (max-width:1300px) { .topnav { float: left; width: 100%; } .dropdown .dropbtn:nth-child(1) { padding-left: 0px; } } @media screen and (max-width: 1150px) { .dropdown-content { display: none; position: fixed; min-width: 160px; padding-top: 18px; padding-bottom: 18px; z-index: 999; background-color: white; } } .dropdown-content a { float: none; color: #009fda; padding: 8px 24px; text-decoration: none; display: block; text-align: left; font-weight: normal; } .topnav a:hover, .dropdown:hover .dropbtn { color: #002776; } @media screen and (max-width: 1150px) { .dropdown:hover .dropdown-content { display: block; } } @media screen and (min-width: 1150px) { .dropdown-content { visibility: hidden; opacity: 0; position: absolute; min-width: 160px; padding-top: 18px; padding-bottom: 18px; z-index: 999; background-color: white; } .dropdown:hover .dropdown-content { visibility: visible; opacity: 1; -moz-transition: opacity 300ms ease-in, visibility 300s ease-in; -o-transition: opacity 300ms ease-in, visibility 300s ease-in; -webkit-transition: opacity 300ms ease-in, visibility 300s ease-in; transition: opacity 300ms ease-in, visibility 300s ease-in; } } @media screen and (max-width: 1150px) { .topnav a, .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1150px) { .logo img { padding-left: 11px; } .custom-navi { margin: 0; padding: 0px; } .topnav.responsive { position: relative; width: 100%; margin-top: 15px; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .dropdown-content { position: relative; padding-left: 10px; padding-top: 0px; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; padding: 14px 16px; } } .active { color: #002776 !important; } #nav-icon3 { width: 40px; height: 40px; top: 7px; position: relative; margin: 0px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 5px; width: 100%; background: #009fda; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /* Icon 3 */ #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 12px; } #nav-icon3 span:nth-child(4) { top: 24px; } #nav-icon3.open span:nth-child(1) { top: 12px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 12px; width: 0%; left: 50%; } .main { background-color: #eee; width: 100vw; height: 100vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="custom-navi"> <div class="logo"> <a href="#">LOGO</a> </div> <div class="topnav" id="myTopnav"> <!-- Navigation element mit subnavi--> <div class="dropdown"> <button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i> </button> <div class="dropdown-content"> <!-- Subnavi Elements--> <a>Contact persons</a> <a>Contact persons</a> <a>Contact persons</a> <a>Contact persons</a> </div> </div> <!-- Navigation element mit subnavi--> <div class="dropdown"> <button class="dropbtn">IT </button> <!-- Subnavi Elements--> </div> <a href="javascript:void(0);" style="" class="icon" onclick="myFunction()"> <div id="nav-icon3"> <span></span> <span></span> <span></span> <span></span> </div> </a> </div> </section> <br><br><br><br> <div class="main"> Page Body </div>

Answer 2

don't use position fixed if you dont want the element to stick to screen. use relative.

@media screen and (min-width: 1150px)
.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: relative;
    min-width: 160px;
    padding-top: 18px;
    padding-bottom: 18px;
    z-index: 999;
    background-color: white;
}

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; $('#nav-icon3').toggleClass('open'); } else { x.className = "topnav"; $('#nav-icon3').toggleClass('open'); } } $(".dropbtn").bind( "click", function() { if ($(window).width() < 1150) { $(this).next().toggle(); } });

 .border-bottom{ width: 100vw; border-bottom: 3px solid #eee; bottom: -11px; z-index: 100; padding: 0 !important; position: absolute; } .logo{ float:left; } .logo img{ width:290px; } .custom-navi{ margin:0; padding: 0 55px; } .topnav { overflow: hidden; float: right; } .dropbtn i { font-size: 27px; font-weight: bold; top: 2px; position: relative; } .topnav a { float: left; display: block; color: #009fda; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; font-weight:bold; } .topnav .icon { display: none; padding-top:5px; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 20px; border: none; font-weight: bold; background-color:white; outline: none; color: #009fda; padding: 14px 22px; font-family: inherit; margin: 0; } @media only screen and (min-width:1300px) and (max-width:1600px) { .custom-navi{ padding: 0 1.5% 0 1.7%; } } @media only screen and (min-width:1150px) and (max-width:1300px) { .topnav { float: left; width: 100%; } .dropdown .dropbtn:nth-child(1) { padding-left: 0px; } } @media screen and (max-width: 1150px) { .dropdown-content { display:none; position: relative; min-width: 160px; padding-top:18px; padding-bottom: 18px; z-index:999; background-color:white; } } .dropdown-content a { float: none; color: #009fda; padding: 8px 24px; text-decoration: none; display: block; text-align: left; font-weight:normal; } .topnav a:hover, .dropdown:hover .dropbtn { color: #002776; } @media screen and (max-width: 1150px) { .dropdown:hover .dropdown-content { display:block; } } @media screen and (min-width: 1150px) { .dropdown-content { visibility: hidden; opacity:0; position: relative; min-width: 160px; padding-top:18px; padding-bottom: 18px; z-index:999; background-color:white; } .dropdown:hover .dropdown-content { visibility:visible; opacity:1; -moz-transition: opacity 300ms ease-in, visibility 300s ease-in; -o-transition: opacity 300ms ease-in, visibility 300s ease-in; -webkit-transition: opacity 300ms ease-in, visibility 300s ease-in; transition: opacity 300ms ease-in, visibility 300s ease-in; } } @media screen and (max-width: 1150px) { .topnav a, .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1150px) { .logo img{ padding-left:11px; } .custom-navi{ margin:0; padding: 0px; } .topnav.responsive {position: relative; width:100%; margin-top:15px;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;padding-left:10px;padding-top:0px;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; padding: 14px 16px; } } .active{ color:#002776 !important; } #nav-icon3 { width: 40px; height: 40px; top: 7px; position: relative; margin: 0px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 5px; width: 100%; background: #009fda; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /* Icon 3 */ #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 12px; } #nav-icon3 span:nth-child(4) { top: 24px; } #nav-icon3.open span:nth-child(1) { top: 12px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 12px; width: 0%; left: 50%; } .main{background-color:#eee; width:100vw; height:100vh;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="custom-navi"> <div class="logo"> <a href="#">LOGO</a> </div> <div class="topnav" id="myTopnav"> <!-- Navigation element mit subnavi--> <div class="dropdown"> <button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i> </button> <div class="dropdown-content"> <!-- Subnavi Elements--> <a >Contact persons</a> <a >Contact persons</a> <a >Contact persons</a> <a >Contact persons</a> </div> </div> <!-- Navigation element mit subnavi--> <div class="dropdown"> <button class="dropbtn">IT </button> <!-- Subnavi Elements--> </div> <a href="javascript:void(0);" style="" class="icon" onclick="myFunction()"> <div id="nav-icon3"> <span></span> <span></span> <span></span> <span></span> </div></a> </div> </section> <br><br><br><br> <div class="main"> Page Body </div>