Drop down menu is not opening while mouse over - css

Question

i am just a beginning in HTML5 and CSS. Im trying to make a dropdown menu but something is going wrong. Looking a while into it but cannot find my mistake. I hope somebody is willing to help me! Here below my CSS coding.. If theres some questions or details needed comments i would love to hear them ofcourse.
*{
margin: 0;
padding: 0;
front-family: century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(image.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration:none;
color:#fff;
padding:5px 20px;
border:2px solid transparent;
transition: 0.8s ease;
}
ul li a:hover{
background-color:#fff;
color: #000;
}
ul li.active a{
background-color:#fff;
color: #000;
}
/* Dropdown Button */
.dropbtn {
background-color: #fff;
color: black;
padding: 16px;
font-size: 16px;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding:10px 50px;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.logo img{
float:left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}

Answer 1

There is nothing in your CSS, telling the .dropdown-content to appear, when you hover. You could try something like this. I have copied your CSS and added to it, also adding in some HTML:
*{
margin: 0;
padding: 0;
font-family: century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(image.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration:none;
color:#fff;
padding:5px 20px;
border:2px solid transparent;
transition: 0.8s ease;
}
ul li a:hover{
background-color:#fff;
color: #000;
}
ul li.active a{
background-color:#fff;
color: #000;
}
/* Dropdown Button */
.dropbtn {
background-color: #fff;
color: black;
padding: 16px;
font-size: 16px;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding:10px 50px;
display: inline-block;
}
.dropbtn:hover ~ .dropdown .dropdown-content {
display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.logo img{
float:left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
<header>
<div class="dropbtn">show dropdown</div>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</header>
I am using the general sibling selector ~, to make my :hover CSS work. I can improve this answer after seeing your actual HTML.