why the position absolute are not working. help

[aazhar123]

<style>

li a, .dropbtn {
display:inline-block;
text-decoration:none;
color:white;
padding:14px 16px;
font-size:20px;
float:left;
}
li.dropdown {
display: inline-block;}

.dropdown-content{
display:none;
position:absolute;
background-color:white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width:160px;}

.dropdown-content a{
text-decoration:none;
color:black;
display:block;
padding:12px 16px;
text-align: left;
}

ul {
list-style-type:none;
overflow:hidden;
margin: 0;
padding: 0;
background-color:#333;
}

li a:hover ,.dropdown:hover .dropbtn{
background-color:red;}

.dropdown:hover .dropdown-content{
display:block;}

.dropdown-content a:hover {
background-color: #f1f1f1;}

</style>

• Home
• News
Dropdown
Link1 Link2 Link3

[aazhar123]

the dropdown-content should be under the dropdown button