Add the hover dropdown selection in the tab

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'>&nbsp;</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'>&nbsp;</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">
    <a href="#">test 1</a>
    <a href="#">test 2</a>
    <a href="#">test 3</a>
  </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'>&nbsp;</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">
      <a href="#">test 1</a>
      <a href="#">test 2</a>
      <a href="#">test 3</a>
    </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>