Add the hover dropdown selection in the tab - html

Question

I have a problem to do the hover to show the selection in the setting tab, below is my coding:
Original coding:
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="btn-group">
<a style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
</div>
What I've tried the coding:
<style>
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<div class="dropdown-content">
test 1
test 2
test 3
</div>
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
</div>
My tried coding output show me like below:
My original output show like below:
I want the expected result like below the picture when my mouse pointer move to setting tab:
Hope someone can guide me how to solve this problem. Thanks.

Answer 1

I have added .dropdown-content and .dropdown-content a CSS to generate your desire output. Please see and run the code snippet for details.
Edit 1: Please see the comment for the change details.
/* Add dropdown-content CSS */
.dropdown-content {
display: none;
position: absolute;
min-width: 100px;
z-index: 9;
}
/* Add .dropdown-content a */
.dropdown-content a {
display: block;
background: #f1f1f1;
text-decoration: none;
color: black;
}
/* Edit 1: Add .dropdown */
.dropdown {
display: inline-block; /* Change display from block to inline-block */
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<div class="dropdown-content">
test 1
test 2
test 3
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>

Answer 2

<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
First of all, you have 2 class attrs in one html tag, put it all in a single one:
<a class="dropbtn btn btn-metis-1 btn-sm" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom"
<i class="fa fa-align-justify"></i>
</a>
check if that solve your problem