sticky topnav but dropdowns do not show - html

Question

I want to make a horizontal navigation bar that is sticky to the top with dropdown menus. The problem is that the dropdown menus no longer show when I make the navigation bar sticky.
I used the following CSS3 to achieve the sticky effect. Is there another way to accomplish the same effect, especially with CSS.
.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* This line adds stickyness */
top: 0; /* along with this line here */
width: 100%;
}
Minimum Problematic Example:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<b>V</b>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
Edit:
Thanks to Saeed and dkobando. I am only at the start of my web document journey. I have been slowly piecing together the parts of my site from various guides. I was pleasantly surprised by two helpful prompt answers. Your replies here encourage me to continue my journey.

Answer 1

You may try this fix below, I used a display flex and remove the overflow: hidden; on your .topnav class. I hope this will help.
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown <b>V</b></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:flex;
}
.topnav a,
.dropdown,
.dropdown .dropbtn {
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
}
.topnav a,
.dropdown .dropbtn{
padding: 14px 16px;
}
.dropdown .dropbtn {
background-color: transparent;
border: none;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}

Answer 2

That is because the dropdown is positioned absolutely and It won't be positioned according to the fixed nav bar but according to the closest relative positioned element. It can be quickly fixed with an extra wrapper with fixed positioning.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="fixed">
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<b>V</b>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>