Dropdown menus disappear when navbar is fixed on scrolling - css

Question

I have a navbar that is a mix of links and dropdowns. When I attempt to make the navbar sticky to the top, so that it will fix to the top of screen as the user scrolls, the dropdown functionality of the navbar quits working.
CSS
.topnav {
overflow: hidden;
background-image: url(http://www.buffettworld.com/images/navmenubg.png);
background-size: 100%;
font-family: 'Pathway Gothic One', sans-serif;
margin-top: 10px;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
font-size: 21px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 21px;
border: none;
outline: none;
color: white;
padding: 14px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #b1d235;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.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;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
.sticky {
position: fixed;
top: 10px;
width: 100%
}
HTML
<div class="topnav" id="myTopnav">
HOME
NEWS
TOUR
<div class="dropdown">
<button class="dropbtn">JIMMY
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
BIOGRAPHY
AVIATION
INCIDENTS
BUSINESS EMPIRE
CONTACT JIMMY
</div>
</div>
<div class="dropdown">
<button class="dropbtn">MUSIC
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
ALBUMS
SONGS
CHART HISTORY
TRIBUTE BANDS
</div>
</div>
SET LISTS
ABOUT
ADVERTISE
CONTACT
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script>
window.onscroll = function() {myFunction()};
var mytopnav = document.getElementById("mytopnav");
var sticky = mytopnav.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
mytopnav.classList.add("sticky")
} else {
mytopnav.classList.remove("sticky");
}
}
</script>
Here's a JSfiddle: https://jsfiddle.net/martonian/shopttvk/1/
This is my first time asking a question on here, so hopefully everything is here that is needed. Thanks