drop down menu not working and in wrong position - html

Question

https://jsfiddle.net/0q5s98sL/
Below is attached a jsfiddle, currently the drop down menu doesn't work and I want it to be position in the top right corner instead of the left,
If possible id like the drop down menu to fill up the entire navbar when selected as this web app is solely for mobile devices,
does anyone have any ideas of how I can solve these issues?
Thanks in advance
body {
background-color: black;
}
#icon {
max-width: 200px;
margin: 1% auto;
}
#navlogo {
position: absolute;
right: 3rem;
height: 4rem;
top: 2rem;
line-height: 100px;
}
footer {
width: 100%;
background: black;
color: white;
}
.fa {
padding: 20px;
font-size: 30px;
color: white;
}
.fa:hover {
color: lightgrey;
text-decoration: none;
}
#logo
/*main logo*/
{
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
margin-left: auto;
margin-right: auto;
z-index: -1;
line-height: 100px;
}
h1 {
font-family: "Josefin Sans";
font-size: 2.5em;
right: 3rem;
}
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
#icon {
max-width: 150px;
}
h4 {
font-size: 1.9em;
}
img {
max-height: 100px;
}
p {
padding-bottom: 5rem;
}
p#h6 {
font-family: "Josefin Sans";
color: white;
font-size: 3.5rem;
float: left;
line-height: 150px;
padding-top: 0;
z-index: -1;
margin-left: 1rem;
}
#h7 {
font-family: "Josefin Sans";
color: white;
float: left;
font-size: 2.5rem;
line-height: 150px;
}
#h8 {
font-family: "Josefin Sans";
color: white;
float: left;
font-size: 2.5rem;
line-height: 150px;
}
h4 {
font-family: "Josefin Sans";
color: white;
font-size: 3rem;
width: 100px;
text-align: left;
position: fixed;
top: 0rem;
left: 1rem;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
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;
background-color: inherit;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="js/java.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="dropdown">
<button class="dropbtn"> <img src="http://konpakuto.com/logo.jpg">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h4 style="padding-bottom:-40rem;">health</h4>

Answer 1

by adding the following CSS you will get a working drop down
.navbar {
overflow: visible;
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown:hover .dropdown-content {
display: block;
}