Positioning a content below a drop down button

Hi! I am super happy last night while I was taking a shower I thought of solution of a problem I had and it WORKED!!! Its the first time I’ve thought of a solution and made it work. Basically making my menu visible on hover. Ive been trying for a few hours now on the 2nd part of the problem. But I need a hint.

Problem: My drop down menu wont position it self as “block” or drop down, instead its side by side(link1, link2, link3) . I have no idea where to start with this, can someone give me the theory/hint on how I am suppose to be thinking about it? I have commented out my solution to the visibility part until I can position the links below the dropdown button.

My CSS

body {
	background-color: #ff794d;
}

.main {
  margin-top: 50px;
}

/*.dropdown-content {
	visibility: hidden;
}

.dropdown:hover .dropdown-content{
	visibility: visible;
}*/


.dropdown-content a {
	display: block;
}

.topnav {
	background-color: #333;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;

}
.topnav a {
	float: left;
	color: #f2f2f2;
	text-align: justify;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:hover {
	background-color: #ddd;
	color: black;
}

.topnav a#active {
  background-color: #4CAF50;
  color: white;
}

My HTML

<!DOCTYPE html>
<html>
<head>
	<title> Practice Part 2</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<div class="topnav">
			<a id="active" href="#Home">Home</a>
			<a href="#News">News</a>
			<a href="#about">About</a>
			<a href="#Contact">Contact</a>
			<div class="dropdown">
 				<a href="#Contact">Dropdown</a>
 				<div class="dropdown-content">
   					<a href="#">Link 1</a>
   					<a href="#">Link 2</a>
   					<a href="#">Link 3</a>
 				</div>
			</div> 
		</div>
	</header>

	<div class="main">
	</div>
</body>
</html>
  1. Move the .dropdown-content a selector below the rule it should be overwriting and remove the float using float: none

  2. You can make dropdown position relative and then dropdown-content position absolute. You now need to position the dropdown (using the offsets top/left).

  3. You have to remove overflow hidden from .topnav.

Personally I’d suggest you use flexbox instead of floats.