Drop down menu doesn't work how I want it to - html

Question

I am trying to make a menu which contains one menu-item with a dropdown, however I can't seem to get it quite right.
I started off with combining my existing menu bar to a piece of code for a dropdown, I have managed to get de drop down item in the menu bar, but I don't know how to get the menu bar back to the top again and it still has a blank on the left.
There is also an extra empty item in my drop down menu and I don't know how to get rid off it?
Can someone please help me I feel like I am overlooking something
.menu-bar {
position: fixed;
width: 100vw;
background-color: #134c95;
color: white;
display: flex;
flex-direction: row;
justify-content: center;
opacity: 0.8;
}
.menu-item {
padding: 10px;
cursor: default;
font-size: 15pt;
margin-left: 15px;
margin-right: 15px;
}
.menu-item:hover,
a:hover {
background-color: white;
cursor: pointer;
color: 234c95;
}
.menu-bar a {
color: white;
}
.menu-bar a:visited {
color: white;
}
.menu-bar a:link,
.menu-bar a:visited {
text-decoration: none;
}
/*
.menu-bar a:hover {
color: #134c95;
}
*/
/* Dropdown Button */
.dropbtn {
background-color: inherit;
color: white;
/* padding: 16px;*/
/* font-size: 16px;*/
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
/*
.dropdown {
position: fixed;
display: inline-block;
}
*/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: #234c95;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: 234c95;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: white;
color: #234c95;
}
<div class="menu-bar">
<a href="instructiestest.html">
<div class="menu-item">Welkom</div>
</a>
<a href="instructie2.html">
<div class="menu-item">Aanmelden Portbase</div>
</a>
<a href="instructie3.html">
<div class="menu-item">De App</div>
</a>
<a href="testing.html">
<div class="dropdown">
<button class="dropbtn">
<div class="menu-item">Het team</div>
<div class="dropdown-content">
Google
Facebook
YouTube
</div>
</button>
</div>
</a>
</div>

Answer 1

Remove the a tag from your dropdown item, like below:
<div class="menu-bar">
<a href="instructiestest.html">
<div class="menu-item">Welkom</div>
</a>
<a href="instructie2.html">
<div class="menu-item">Aanmelden Portbase</div>
</a>
<a href="instructie3.html">
<div class="menu-item">De App</div>
</a>
<div class="dropdown">
<button class="dropbtn">
<div class="menu-item">Het team</div>
<div class="dropdown-content">
Google
Facebook
YouTube
</div>
</button>
</div>
</div>
Also, your .dropdown-content a:hover rule is missing a # in your background-color attribute:
.dropdown-content a:hover {
background-color: #234c95;
color: white;
}
Here is a working Fiddle

Answer 2

Something seems to have an extra margin or similar. Try to load the code, and check with the inspector. It'll show you the different spacing types in nice colours: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model

Answer 3

In all honesty, you might be better re structuring this menu completely. I don't mean to be harsh but the code isn't structured well enough and is a little confusing to work with.
Ive just tweaked your code a little to make it easier to work with. I'm not exactly sure what it is your trying to achieve but here is something for you to take a look at:
CSS
#menu-bar {
position: fixed;
width: 100vw;
background-color: #134c95;
padding: 15px;
}
#menu-bar ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 22px;
font-family:sans-serif;
}
#menu-bar ul li {
margin-bottom: 10px;
width: 100%;
}
#menu-bar ul li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
#menu-bar ul li a:hover {
color: #134c95;
background-color: #fff;
}
#menu-bar ul li ul {
display: none;
}
#menu-bar ul li:hover ul {
display: block;
}
HTML
<nav id="menu-bar">
<ul>
<li>Welkom</li>
<li>Aanmelden Portbase</li>
<li>De App</li>
<li class="">Het team
<ul>
Google
Facebook
YouTube
</ul>
</li>
</ul>
</nav>
As you can see this is much easier to understand and follow. The ID of the nav element is all you need to style the child elements.
Hope that helps as a starting point!