<div> gets moved out of an a-element - html

Question

I have a problem. I suspect that the problem is a browser-side rendering problem. Maybe even an expectable behaviour, but I have no idea, and that is why I am going to ask you:
I have an <a>-element and I place two other elements (a <span> and a <div>, the <div> has even more children) inside that element.
I upload my HTML-file to my server and can access and download it (e.g. via curl or wget). There is no problem and the file is exactly the same. When I open it in web browsers (I tested Firefox and Chrome) it is still the same, but only when I open it using the "debugging" tab where I can see the original files. The displayed HTML-file (which I can access using the "inspection" tab) is different. The <div>-element got moved out of the <a>-element. Here is the code-snippet:
<div class="navbar">
A link
<a class="dropdown">
<span>A dropdown</span>
<div class="dropdown-content">
Another link
And a third link
</div>
</a>
</div>
As you can guess, it is a snipped from a navbar ;) Maybe you need the CSS (I use SCSS-files) too:
.navbar {
background-color: $navbar-color;
overflow: hidden;
padding-left: 10vw;
padding-right: 10vw;
a {
position: relative;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: $navbar-text-color;
}
a.dropdown {
position: static;
display: inline-block;
span::after {
content: '\f0d7';
font-family: FontAwesome;
padding-left: 6px;
}
.dropdown-content {
display: block;
position: absolute;
background-color: $navbar-color;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: $navbar-text-color;
}
}
}
}
I know, the design is not perfect and not finished, but I expect I am facing an HTML problem and so I wanted to ask you first.
Do you have any hints, ideas, references, explanations or corrections for me? I would really appreciate it.