Dropdownlist never show under the parents - html

Question

I'm trying to make a dropdownlist in a bar, but no matter what I did, the dropdownlist will never appear below the parent. Here is my css code:
ul{
list-style:none;
padding:0;
margin-left:auto;
width:100%;
overflow: hidden;
background-color: #F9282F;}
li a{
display:inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float:left;
font-size:15px;
font-weight:bold;}
li a:hover{
background-color: #111;}
.dropdown {
position:relative;
display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
background-color: #800000;
min-width: 160px;}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
.dropdown:hover .dropdown-content {
display: block;}
.dropdown:hover .dropbtn {
background-color: #111;}
<li class="dropdown" ><a class="dropbtn">BlaBla</a>
<div class="dropdown-content">
link 1
link 2
</div></li>
Hope someone will help me get out of this problem. THANKS!

Answer 1

Add color blank to your class (.li a) and add margin-top:50px to your class(.dropdown-content) and its start working.
ul{
list-style:none;
padding:0;
margin-left:auto;
width:100%;
overflow: hidden;
background-color: #F9282F;}
li a{
display:inline-block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float:left;
font-size:15px;
font-weight:bold;}
li a:hover{
background-color: #111;}
.dropdown {
position:relative;
display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
background-color: #800000;
min-width: 160px;
margin-top:50px;}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
.dropdown:hover .dropdown-content {
display: block;}
.dropdown:hover .dropbtn {
background-color: #111;}
<li class="dropdown" ><a class="dropbtn">BlaBla</a>
<div class="dropdown-content">
link 1
link 2
</div></li>

Answer 2

You can add top: 100%; to .dropdown-content

Answer 3

Remove float:left from li a. You're trying to float the anchors.

Answer 4

Parent shouldn't take float:left
so this style="float: none;" will solve the problem
<a class="dropbtn" style="float: none;">BlaBla</a>

Answer 5

Using floats in cases of dropdown lists can generally be a bad idea. You can achieve most of the work by using display-inline block, UL and LI elements only as structural (f.e. define width), and elements inside to present them selves like A.
ul{
list-style:none;
padding:0;
margin-left:auto;
width:100%;
}
li a{
display:inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15px;
font-weight:bold;
background-color: #F9282F;
}
li a:hover{
background-color: #111;
}
.dropdown {
position:relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #800000;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #111;
}
ul.root {
height: 50px;
}
ul.root li {
position: relative;
}
ul.root ul {
position: absolute;
}
html:
<ul class="root">
<li class="dropdown" ><a class="dropbtn">BlaBla</a>
<ul class="dropdown-content">
<li>link 1</li>
<li>link 2</li>
</ul>
</li>
</ul>
<div>Something else</div>
Edit: I updated the code a bit so you wouldn't have a problem with any elements underneath. You can use z-index if you have issues with overlaping order.