Problems with getting a dropdown to show with a sticky nav bar

HTML & CSS
1

I created a navbar which worked fine.
I’ve added sticky to it and the drop menu has stopped working. It looks like it is behind the backgroud (I can see the top of the dropdown).

Hiw can I get the dropdown to show?

Here is the html code

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">EPC information</a>
  <a href="#news">Prices and Book</a>
  <a href="#contact">Area Covered</a>
   <a href="#about">FAQ's</a>
   <a href="#about">Help</a>
     <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a> 
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Here is the main css (I think) for the dropdown menu

 .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
   
  }

This is the codepen
https://codepen.io/tony-webb/pen/XWLJOOy
2

In .topnav remove overflow:hidden or nothing will show outside but you will need to add display:flow-root to contain your floats. (It would have been better to use flex and not floats)